如何在 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 是一種網頁框架,允許您使用 C# 而非 JavaScript 來構建互動式網頁 UI。 在此框架中,組件的邏輯在伺服器上運行。

IronPDF 讓您能夠在 Blazor 伺服器項目或應用程式中從 Razor 組件生成 PDF 文件。 這使得在Blazor Server中創建PDF文件/頁面變得簡單直接。

IronPDF 擴充套件包

IronPdf.Extensions.Blazor 套件 是主要 IronPdf 套件的一個擴展。 IronPdf.Extensions.Blazor 和 IronPdf 這兩個套件都是需要的,以便在 Blazor Server App 中將 Razor 元件渲染為 PDF 文件。

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

安裝與 NuGet

Install-Package IronPdf.Extensions.Blazor

將 Razor 元件渲染成 PDF 文件

需要一個 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/APDF/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 標題和頁腳. 此外,您可以添加頁碼並調整頁面尺寸和佈局以符合您的喜好。

將一個部分添加到左側選單

  • 導航至“共享文件夾”並打開 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 伺服器應用程式專案

您可以下載本指南的完整代碼。它以壓縮檔的形式提供,您可以將其在 Visual Studio 中作為 Blazor Server App 項目打開。

下載用於 Razor 到 PDF 轉換的 Blazor 範例專案

Chaknith related to 下載 Blazor 伺服器應用程式專案

查克尼思·賓

軟體工程師

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