C# を使用して Blazor Server で Razor を PDF に変換する PdfDocument

どのようなモデルクラス構造を使うべきですか?

PersonInfo という名前の標準的な C# クラスを追加してください。 このクラスは、人物情報を格納するためのモデルとして機能します。 次のコードを挿入してください。

: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

このモデルは、Razorコンポーネントに渡され、PDFでレンダリングされるデータ構造を表しています。 IronPDFはシンプルなPOCOから複雑なEntity Frameworkモデルまで、どのようなC#オブジェクトモデルでも動作します。 PDF生成のためのモデルを設計するときは、最終的な文書でデータがどのように表示されるかを考慮し、それに応じてプロパティを構成します。

PDF生成用のRazorコンポーネントを実装するには?

RazorコンポーネントをPDFに変換するには、RenderRazorComponentToPdfメソッドを使用してください。 このメソッドにアクセスするには、` クラスをインスタンス化してください。 このメソッドは、エクスポートやさらなる変更を行うためのPdfDocument` オブジェクトを返します。

返される PdfDocument は、PDF/A または PDF/UA 形式への変換を含む、さらなる変更に対応しています。 ドキュメントのマージや分割、ページの回転、注釈やブックマークの追加ができます。 必要に応じて、カスタム透かしを適用してください。

Person.razor という名前の Razor コンポーネントを追加してください。 次のコードを入力してください。

@page "/Person"
@using BlazorSample.Data;
@using IronPdf;
@using IronPdf.Extensions.Blazor;

<h3>Person</h3>

@code {
    // A parameter to receive a list of persons from the parent component.
    [Parameter]
    public IEnumerable<PersonInfo> persons { get; set; }

    // Dictionary to hold parameters that will be passed to the PDF renderer.
    public Dictionary<string, object> Parameters { get; set; } = new Dictionary<string, object>();

    protected override async Task OnInitializedAsync()
    {
        // Initialize the persons list with some sample data.
        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 to the PDF pages.
        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 and save it.
        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>

このメソッドを使用すると、RenderingOptionsのすべての機能にアクセスできます。 テキストとHTMLのヘッダーとフッターを追加し、ページ番号を含め、ページの寸法とレイアウトを調整します。 RenderingOptions は、カスタム余白、レスポンシブデザインのためのビューポート設定、および動的コンテンツのための JavaScript 実行遅延をサポートしています。

複雑なレイアウトやBootstrapのようなCSSフレームワークでは、レスポンシブCSSレンダリング機能を検討し、さまざまなページサイズでPDFが正しく表示されるようにします。

どのように Razor コンポーネントにナビゲーションを追加しますか?

• "共有フォルダ"に移動し、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>

このナビゲーション設定はBlazorのルーティングシステムと統合されており、ユーザーはアプリケーションのメインナビゲーションメニューからPDF生成機能にアクセスすることができます。 NavLink コンポーネントは、アクティブなルートの適切なハイライト表示を保証します。

PDF生成プロセスはどのようなものですか?

プロジェクトを実行し、PDFドキュメントを生成します。 Print to PDF "ボタンをクリックしてください。 IronPDFはRazorコンポーネントを処理し、HTMLに変換し、Chromeベースのレンダリングエンジンを使ってPDFとしてレンダリングします。これにより、最新のウェブブラウザと同じ視覚的忠実性が維持されます。

生成されたPDFは、プロジェクトの出力ディレクトリに保存されます。 保存場所をカスタマイズしたり、ブラウザから直接ダウンロードしたり、Azure Blob StorageのようなクラウドストレージにPDFを保存したりすることができます。 本番アプリケーションでは、PDFの生成に失敗したり、予想時間を超えたりする可能性のあるシナリオについて、エラー処理とユーザーフィードバックを実装します。