在Blazor伺服器以C# PdfDocument 將Razor轉換為PDF

我應該使用哪種模型類結構？

新增一個名為PersonInfo的標準C#類。 此類用作儲存人員資訊的模型。 插入以下程式碼：

:path=/static-assets/pdf/content-code-examples/how-to/razor-to-pdf-blazor-server-model.cs

namespace BlazorSample.Data
{
    public class PersonInfo
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
    }
}

Namespace BlazorSample.Data
	Public Class PersonInfo
		Public Property Id() As Integer
		Public Property Name() As String
		Public Property Title() As String
		Public Property Description() As String
	End Class
End Namespace

此模型代表傳遞給您的Razor元件並在PDF中渲染的資料結構。 IronPDF可與任何C#物件模型協同工作，從簡單的POCO到複雜的Entity Framework模型。 在為PDF生成設計模型時，請考慮如何在最終文件中顯示資料並相應地結構化屬性。

我如何實現Razor元件以生成PDF？

使用RenderRazorComponentToPdf方法將Razor元件轉換為PDF。 通過實例化ChromePdfRenderer類存取此方法。 該方法返回一個PdfDocument物件以供匯出或進一步修改。

返回的PdfDocument支持額外的修改，包括轉換為PDF/A或PDF/UA格式。 您可以合併或拆分文件，旋轉頁面，並新增註釋或書籤。 根據需要應用自定義浮水印。

新增一個名為Person.razor的Razor元件。 輸入以下程式碼：

@page "/Person"
@using BlazorSample.Data;
@using IronPdf;
@using IronPdf.Extensions.Blazor;

<h3>Person</h3>

@code {
    // A parameter to receive a list of persons from the parent component.
    [Parameter]
    public IEnumerable<PersonInfo> persons { get; set; }

    // Dictionary to hold parameters that will be passed to the PDF renderer.
    public Dictionary<string, object> Parameters { get; set; } = new Dictionary<string, object>();

    protected override async Task OnInitializedAsync()
    {
        // Initialize the persons list with some sample data.
        persons = new List<PersonInfo>
        {
            new PersonInfo { Name = "Alice", Title = "Mrs.", Description = "Software Engineer" },
            new PersonInfo { Name = "Bob", Title = "Mr.", Description = "Software Engineer" },
            new PersonInfo { Name = "Charlie", Title = "Mr.", Description = "Software Engineer" }
        };
    }

    private async void PrintToPdf()
    {
        ChromePdfRenderer renderer = new ChromePdfRenderer();

        // Apply text footer to the PDF pages.
        renderer.RenderingOptions.TextFooter = new TextHeaderFooter()
        {
            LeftText = "{date} - {time}",
            DrawDividerLine = true,
            RightText = "Page {page} of {total-pages}",
            Font = IronSoftware.Drawing.FontTypes.Arial,
            FontSize = 11
        };

        Parameters.Add("persons", persons);

        // Render Razor component to PDF and save it.
        PdfDocument pdf = renderer.RenderRazorComponentToPdf<Person>(Parameters);
        File.WriteAllBytes("razorComponentToPdf.pdf", pdf.BinaryData);
    }
}

<table class="table">
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Description</th>
    </tr>
    @foreach (var person in persons)
    {
        <tr>
            <td>@person.Name</td>
            <td>@person.Title</td>
            <td>@person.Description</td>
        </tr>
    }
</table>

<button class="btn btn-primary" @onclick="PrintToPdf">Print to Pdf</button>

此方法提供了所有RenderingOptions功能的存取權限。 新增文字和HTML標題和頁尾，包括頁碼，並調整頁面尺寸和佈局。 RenderingOptions 支持自定義邊距，響應式設計的視口設置，以及動態內容的JavaScript執行延遲。

對於複雜佈局或CSS框架如Bootstrap，請探索響應CSS渲染功能以確保PDF在不同頁面大小下正確顯示。

如何在我的Razor元件中新增導航？

• 導航到"Shared folder"並打開NavMenu.razor。 新增將打開我們的Razor元件的區段，Person。 我們的Person元件將是第二個選項。

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="Person">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Person
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
    </nav>
</div>

這種導航設置與Blazor的路由系統整合，允許使用者從您的應用程式主導航選單存取PDF生成功能。 NavLink元件確保正確突出顯示活動路由。

PDF生成過程是什麼樣的？

運行專案並生成PDF文件。 點擊"Print to PDF"按鈕。 IronPDF處理您的Razor元件，將其轉換為HTML，並使用其基於Chrome的渲染引擎將其渲染為PDF。這保持了與現代網頁瀏覽器相同的視覺保真度。

生成的PDF保存在您專案的輸出目錄中。 自定義保存位置，實現直接瀏覽器下載，或者將PDF儲存在如Azure Blob Storage的雲儲存中。 對於生產應用程式，為可能失敗或超過預期時長的PDF生成場景實現錯誤處理和使用者反饋。