1. IronPDF
  2. 操作指南
  3. Razor 轉 PDF（Blazor 伺服器）

如何在 Blazor Server 中將 Razor 轉換為 PDF

This article was translated from English: Does it need improvement?
Translated
View the article in English

由 查克尼思·賓

Razor 元件是一個使用 C# 和 Razor 語法建立的使用者介面元素，例如頁面、對話框或資料輸入表單。它作為可重複使用的 UI 元件。

Blazor Server 是一個 web 框架，允許您使用 C# 而非 JavaScript 來構建互動式 web UI。在此框架中，元件的邏輯在伺服器上運行。

IronPDF 使您能夠在 Blazor Server 專案或應用程式中從 Razor 元件生成 PDF 文件。這使得在 Blazor Server 中創建 PDF 文件/頁面變得簡單直接。

將 Razor 元件轉換為 PDF 的方法

  1. 下載用於在 Blazor Server 裡將 Razor 轉換為 PDF 的 C# 庫
  2. 為數據添加一個模型類別
  3. 建立新的Razor元件並使用 將Razor元件渲染為PDF 方法
  4. 在左側選單添加一個部分以訪問新的Razor組件
  5. 下載範例專案以快速開始

IronPDF Extension Package

IronPdf.Extensions.Blazor 套件是主 IronPdf 套件的擴充。要在 Blazor 伺服器應用程式中將 Razor 元件渲染成 PDF 文件，則需要同時使用 IronPdf.Extensions.Blazor 和 IronPdf 套件。

PM > Install-Package IronPdf.Extensions.Blazor
用於 PDF 的 C# NuGet 程式庫

安裝與 NuGet

Install-Package IronPdf.Extensions.Blazor
nuget.org/packages/IronPdf.Extensions.Blazor/

將 Razor 元件渲染為 PDFs

需要一個 Blazor Server App 專案來將 Razor 元件轉換為 PDF。

添加模型類別

添加一個標準的 C# 類別並命名為 PersonInfo。此類別將作為存儲個人信息的模型。插入以下代碼：

: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
VB   C#

添加一個 Razor 元件

使用 RenderRazorComponentToPdf 方法將 Razor 元件轉換為 PDF。通過實例化 ChromePdfRenderer 類來訪問此方法。該方法返回一個 PdfDocument 對象，這允許您導出 PDF 文件或進一步修改它。

返回的 PdfDocument 可以進行額外的修改，例如轉換為 PDF/A 或 PDF/UA 格式。您還可以 合併或拆分 PDF文件，旋轉其頁面，並添加 註解 或 書籤. 自訂浮水印 也可以加盖到您的 PDF 上。

添加一个 Razor 元件并命名为 Person。输入以下代码：

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

@code {
    [Parameter]
    public IEnumerable<PersonInfo> persons { get; set; }
    public Dictionary<string, object> Parameters { get; set; } = new Dictionary<string, object>();

    protected override async Task OnInitializedAsync()
    {
        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
        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
        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>
@page "/Person"
@using BlazorSample.Data;
@using IronPdf;
@using IronPdf.Extensions.Blazor;
<h3>Person</h3>

@code {
    [Parameter]
    public IEnumerable<PersonInfo> persons { get; set; }
    public Dictionary<string, object> Parameters { get; set; } = new Dictionary<string, object>();

    protected override async Task OnInitializedAsync()
    {
        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
        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
        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>
Private page "/Person" [using] BlazorSample.Data
Private IronPdf As [using]
Private IronPdf As [using]
'INSTANT VB TODO TASK: The following line could not be converted:
(Of h3) Person</h3> code
If True Then
	<Parameter>
	public IEnumerable(Of PersonInfo) persons {get;set;}
	public Dictionary(Of String, Object) Parameters {get;set;} = New Dictionary(Of String, Object)()

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	protected override async Task OnInitializedAsync()
'	{
'		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" } };
'	}
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	private async void PrintToPdf()
'	{
'		ChromePdfRenderer renderer = New ChromePdfRenderer();
'
'		' Apply text footer
'		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
'		PdfDocument pdf = renderer.RenderRazorComponentToPdf<Person>(Parameters);
'
'		File.WriteAllBytes("razorComponentToPdf.pdf", pdf.BinaryData);
'	}
End If

<table class="table"> (Of tr) (Of th) Name</th> (Of th) Title</th> (Of th) Description</th> </tr> foreach(var person in persons)
	If True Then
		(Of tr) (Of td) person.Name</td> (Of td) person.Title</td> (Of td) person.Description</td> </tr>
	End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'</table> <button class="btn btn-primary" @onclick="PrintToPdf"> Print @to Pdf</button>
VB   C#

此外，使用此方法生成 PDF 允許您完全訪問 RenderingOptions 中的所有功能。這包括插入的能力 文本，以及 HTML 標題和頁腳。此外，你可以添加 頁碼 並調整頁面尺寸和佈局以符合您的喜好。

在左側選單中添加一個部分

  • 導航到「Shared 資料夾」並打開 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>
<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>
HTML

運行項目

這將向您展示如何運行此項目並生成PDF文檔。

執行Blazor Server專案

下載 Blazor Server 應用程式專案

您可以下載這個指南的完整程式碼。它是一個壓縮檔案，您可以在 Visual Studio 中打開作為 Blazor Server 應用程式專案。

點擊這裡下載專案。

查克尼思·賓

軟體工程師

Chaknith 是開發者界的夏洛克福爾摩斯。他第一次意識到自己可能有個軟體工程的未來，是在他為了娛樂而參加程式挑戰的時候。他的重點是 IronXL 和 IronBarcode，但他也引以為豪的是，他幫助客戶解決所有產品的問題。Chaknith 利用他與客戶直接對話中獲得的知識，以進一步改進產品。他的實際反饋超越了 Jira 工單，並支持產品開發、文件撰寫和行銷，以提升客戶的整體體驗。不在公司時，他通常在學習機器學習、寫程式和徒步旅行。