如何在 Blazor Server 中將 Razor 轉換為 PDF
Razor 元件是使用 C# 和 Razor 語法構建的用戶介面元素,例如頁面、對話框或資料輸入表單。 它充當可重用的 UI 組件。
Blazor Server 是一種網頁框架,允許您使用 C# 而非 JavaScript 來構建互動式網頁 UI。 在此框架中,組件的邏輯在伺服器上運行。
IronPDF 讓您能夠在 Blazor 伺服器項目或應用程式中從 Razor 組件生成 PDF 文件。 這使得在Blazor Server中創建PDF文件/頁面變得簡單直接。
將 Razor 元件轉換為 PDF 的方法
IronPDF 擴充套件包
IronPdf.Extensions.Blazor 套件 是主要 IronPdf 套件的擴展。 IronPdf.Extensions.Blazor 和 IronPdf 這兩個套件都是需要的,以便在 Blazor Server App 中將 Razor 元件渲染為 PDF 文件。
PM > Install-Package IronPdf.Extensions.Blazor
使用 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; }
}
}
添加 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>
此外,使用此方法生成 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>
執行專案
這將向您展示如何運行項目並生成PDF文檔。

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