BlazorサーバーでRazorをPDFに変換する方法
Razorコンポーネントとは、C#およびRazor構文を使用して構築された、ページ、ダイアログ、またはデータ入力フォームなどのユーザーインターフェース要素です。 それは再利用可能なUIの一部として機能します。
Blazor Serverは、JavaScriptの代わりにC#を使用してインタラクティブなWeb UIを構築するためのWebフレームワークです。 このフレームワークでは、コンポーネントのロジックがサーバー上で実行されます。
IronPDFは、Blazor Serverプロジェクトまたはアプリケーション内のRazorコンポーネントからPDFドキュメントを生成することを可能にします。 これは、Blazor ServerでのPDFファイル/ページの作成を簡単にします。
RazorコンポーネントをPDFに変換する方法
IronPDF拡張パッケージ
IronPdf.Extensions.Blazor パッケージはメインのIronPdfパッケージの拡張です。 Blazor Server アプリで Razor コンポーネントを PDF ドキュメントにレンダリングするためには、IronPdf.Extensions.Blazor および IronPdf パッケージの両方が必要です。
PM > Install-Package IronPdf.Extensions.Blazor
NuGetでインストール
インストール-パッケージ IronPdf.Extensions.Blazor
RazorコンポーネントをPDFにレンダリング
Blazor Server アプリプロジェクトは、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コンポーネントを追加
RazorコンポーネントをPDFに変換するには、RenderRazorComponentToPdf
メソッドを使用します。 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ヘッダーおよびフッターを挿入する機能が含まれます。 さらに、ページ番号を追加し、ページの寸法やレイアウトを好みに合わせて調整できます。
左メニューにセクションを追加
- 「Shared フォルダー」に移動し、NavMenu.razor を開きます。
- Razorコンポーネント「Person」を開くセクションを追加します。 私たちのPersonコンポーネントが2番目のオプションとなります。
<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 Server アプリプロジェクトをダウンロード
このガイドの完全なコードはダウンロード可能です。これはVisual StudioでBlazor Server Appプロジェクトとして開くことができるZIPファイルとして提供されます。