如何在 Blazor 服务器中将 Razor 转换为 PDF

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

查克尼特·宾

Razor 组件是使用 C# 和 Razor 语法构建的用户界面元素,如页面、对话框或数据输入表单。它是一个可重复使用的用户界面。

Blazor Server 是一个网络框架,可让您使用 C# 而不是 JavaScript 构建交互式网络用户界面。在该框架中,组件的逻辑运行在服务器上。

IronPDF使您能够在Blazor服务器项目或应用程序中通过Razor组件生成PDF文档。这使得在Blazor Server中创建PDF文件/页面变得简单易行。

IronPDF 扩展包

IronPdf.Extensions.Blazor包是主包IronPdf**的扩展。IronPdf.Extensions.Blazor和IronPdf包都需要在Blazor服务器应用程序中将Razor组件渲染为PDF文档。

PM > Install-Package IronPdf.Extensions.Blazor
适用于PDF的C# NuGet库

安装使用 NuGet

安装包 IronPdf.Extensions.Blazor

将 Razor 组件渲染为 PDF 文件

将Razor组件转换为PDF需要一个Blazor服务器应用程序项目。

添加一个模型类

添加一个标准 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#

添加一个剃刀组件

使用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 服务器项目

下载 Blazor 服务器应用程序项目

您可以下载本指南的完整代码。它是一个压缩文件,您可以在 Visual Studio 中以 Blazor Server App 项目的形式打开。

点击此处下载项目。

查克尼特·宾

软件工程师

Chaknith 是开发者中的福尔摩斯。他第一次意识到自己可能在软件工程方面有前途,是在他出于乐趣做代码挑战的时候。他的重点是 IronXL 和 IronBarcode,但他为能帮助客户解决每一款产品的问题而感到自豪。Chaknith 利用他从直接与客户交谈中获得的知识,帮助进一步改进产品。他的轶事反馈不仅仅局限于 Jira 票据,还支持产品开发、文档编写和市场营销,从而提升客户的整体体验。当他不在办公室时,他可能会在学习机器学习、编程或徒步旅行。