使用 C# 在 Blazor Server 中將 Razor 轉換為 PDF PdfDocument

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

新增一個名為 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 檔案。 透過實例化 ` 類別來存取此方法。 此方法會傳回一個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 執行延遲。

針對複雜版面配置或 Bootstrap 等 CSS 框架，請運用響應式 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。這能維持與現代網頁瀏覽器相同的視覺保真度。

生成的 PDF 檔案將儲存於您的專案輸出目錄中。 自訂儲存位置、實作直接瀏覽器下載功能，或將 PDF 檔案儲存至 Azure Blob Storage 等雲端儲存空間。 針對生產環境的應用程式，請針對 PDF 生成可能失敗或耗時超出預期等情境，實作錯誤處理與使用者回饋機制。