BlazorサーバーでBlazorをPDFにC#変換する

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

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

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

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

RenderRazorComponentToPdfメソッドを使用して、RazorコンポーネントをPDFに変換します。 このメソッドにアクセスするには、ChromePdfRendererクラスをインスタンス化します。 このメソッドは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の生成に失敗したり、予想時間を超えたりする可能性のあるシナリオについて、エラー処理とユーザーフィードバックを実装します。