使用 C# 在Blazor Server 中將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; }
    }
}

此模型表示傳遞給Razor元件並在 PDF 中呈現的資料結構。 IronPDF可以與任何 C# 物件模型一起使用，從簡單的 POCO 到複雜的Entity Framework模型。 在設計用於產生 PDF 的模型時，請考慮資料在最終文件中的顯示方式，並相應地建立屬性。

如何實作用於產生 PDF 的Razor元件？

使用 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元件添加導航？

• 導航至"共用資料夾"並開啟 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 文件。 點擊"列印為PDF"按鈕。 IronPDF會處理您的Razor元件，將其轉換為 HTML，然後使用其基於 Chrome 的渲染引擎將其渲染為 PDF。這樣可以保持與現代 Web 瀏覽器相同的視覺效果。

產生的 PDF 檔案將保存在專案的輸出目錄中。 自訂儲存位置，實作直接瀏覽器下載，或將 PDF 儲存在 Azure Blob Storage 等雲端儲存中。 對於生產應用，應實現錯誤處理和使用者回饋機制，以應對 PDF 產生可能失敗或超出預期時間的情​​況。