C#でBlazor ServerのRazorコンポーネントをPDFに変換する方法

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

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 メソッドを使用します。 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 は、カスタム マージン、レスポンシブ デザインのビューポート設定、および動的コンテンツ for 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の生成に失敗したり、予想時間を超えたりする可能性のあるシナリオについて、エラー処理とユーザーフィードバックを実装します。