更新済み 2024年12月10日
共有:

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

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

Chaknith Bin によって

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; }
    }
}

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>
HTML

プロジェクトを実行

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

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

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

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

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

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

チャクニット・ビン

ソフトウェアエンジニア

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