BlazorサーバーでRazorをPDFに変換する方法

Chaknith related to BlazorサーバーでRazorをPDFに変換する方法
チャクニット・ビン
2023年9月11日
更新済み 2024年12月10日
共有:
This article was translated from English: Does it need improvement?
Translated
View the article in English

Razorコンポーネントとは、C#およびRazor構文を使用して構築された、ページ、ダイアログ、またはデータ入力フォームなどのユーザーインターフェース要素です。 それは再利用可能なUIの一部として機能します。

Blazor Serverは、JavaScriptの代わりにC#を使用してインタラクティブなWeb UIを構築するためのWebフレームワークです。 このフレームワークでは、コンポーネントのロジックがサーバー上で実行されます。

IronPDFは、Blazor Serverプロジェクトまたはアプリケーション内のRazorコンポーネントからPDFドキュメントを生成することを可能にします。 これは、Blazor ServerでのPDFファイル/ページの作成を簡単にします。

IronPDF拡張パッケージ

IronPdf.Extensions.Blazor パッケージはメインのIronPdfパッケージの拡張です。 Blazor Server アプリで Razor コンポーネントを PDF ドキュメントにレンダリングするためには、IronPdf.Extensions.Blazor および IronPdf パッケージの両方が必要です。

PM > Install-Package IronPdf.Extensions.Blazor
C# NuGetライブラリ for PDF

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; }
    }
}
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
$vbLabelText   $csharpLabel

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>
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>
$vbLabelText   $csharpLabel

さらに、この方法を使用して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>
HTML

プロジェクトを実行

これにより、プロジェクトを実行してPDFドキュメントを生成する方法を示します。

Blazorサーバープロジェクトを実行する

Blazor Server アプリプロジェクトをダウンロード

このガイドの完全なコードはダウンロード可能です。これはVisual StudioでBlazor Server Appプロジェクトとして開くことができるZIPファイルとして提供されます。

RazorからPDFへの変換用Blazorサンプルプロジェクトをダウンロード

Chaknith related to Blazor Server アプリプロジェクトをダウンロード
ソフトウェアエンジニア
チャクニットは開発者のシャーロック・ホームズです。彼がソフトウェアエンジニアリングの将来性に気付いたのは、楽しみでコーディングチャレンジをしていたときでした。彼のフォーカスはIronXLとIronBarcodeにありますが、すべての製品でお客様を助けることに誇りを持っています。チャクニットは顧客と直接話すことで得た知識を活用して、製品自体のさらなる改善に貢献しています。彼の逸話的なフィードバックは、単なるJiraチケットを超えて、製品開発、ドキュメントおよびマーケティングをサポートし、顧客の全体的な体験を向上させます。オフィスにいないときは、機械学習やコーディングについて学んだり、ハイキングを楽しんだりしています。