1. IronPDF
  2. ハウツー
  3. Razor から PDF （Blazor サーバー）

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

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ファイル/ページの作成を簡単にします。

RazorコンポーネントをPDFに変換する方法

  1. Blazor ServerでRazorをPDFに変換するためのC#ライブラリをダウンロード
  2. データ用のモデルクラスを追加する
  3. 新しいRazorコンポーネントを作成し、以下を使用します RenderRazorComponentToPdf（RenderRazorコンポーネントをPDFにレンダー） メソッド
  4. 新しいRazorコンポーネントにアクセスするために、左メニューにセクションを追加します
  5. 迅速にスタートするためにサンプルプロジェクトをダウンロードしてください。

IronPDF拡張パッケージ

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

PM > Install-Package IronPdf.Extensions.Blazor

申し訳ありませんが、翻訳するコンテンツのテキストを提供してください。その後、英語から日本語に翻訳いたします。!-- NUGET ライブラリ ダウンロード ディレクティブ タグ :: スタート -->

PDF用C# NuGetライブラリ

でインストール NuGet

インストール-パッケージ IronPdf.Extensions.Blazor
nuget.org/packages/IronPdf.Extensions.Blazor/

申し訳ありませんが、翻訳するコンテンツのテキストを提供してください。その後、英語から日本語に翻訳いたします。!-- NUGETライブラリダウンロード指示タグ :: 終了 -->

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
VB   C#

Razorコンポーネントを追加

RenderRazorComponentToPdfメソッドを使用して、RazorコンポーネントをPDFに変換します。 ChromePdfRenderer クラスをインスタンス化することで、このメソッドにアクセスできます。 そのメソッドは PdfDocument オブジェクトを返します。これにより、PDFドキュメントをエクスポートしたり、さらに修正したりすることができます。

返却されたPdfDocumentは、たとえばへの変換など、追加の修正を行うことができます PDF/A はい、以下の内容を日本語に翻訳いたします：

以下の内容を日本語に翻訳してください:

IronPDF allows developers to generate, edit and read PDF files in .NET applications. It simplifies the process of integrating PDF functionalities into software development projects.

Let's get started! PDF/UA 形式 また 結合または分割 PDFドキュメントのページを回転させ、追加する 注釈 はい、以下の内容を日本語に翻訳いたします：

以下の内容を日本語に翻訳してください:

IronPDF allows developers to generate, edit and read PDF files in .NET applications. It simplifies the process of integrating PDF functionalities into software development projects.

Let's get started! ブックマーク. カスタム透かし 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ヘッダーとフッター. Additionally, you can add (追加で、以下を追加することができます) ページ番号 ページの寸法とレイアウトをお好みに合わせて調整してください。

左メニューにセクションを追加

  • 「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サーバープロジェクトを実行する

申し訳ありませんが、翻訳するコンテンツのテキストを提供してください。その後、英語から日本語に翻訳いたします。!-- #### 出力 PDF

--> ## Blazor Server アプリプロジェクトをダウンロード このガイドの完全なコードはダウンロード可能です。これはVisual StudioでBlazor Server Appプロジェクトとして開くことができるZIPファイルとして提供されます。 [プロジェクトをダウンロードするにはこちらをクリックしてください。](/static-assets/pdf/how-to/razor-to-pdf-blazor-server/BlazorSample.zip)

チャクニット・ビン

ソフトウェアエンジニア

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