How to Convert Razor to PDF in Blazor Server

モデルクラスを追加

標準の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

Razorコンポーネントを追加

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

The returned PdfDocument can undergo additional modifications, such as conversion to PDF/A or PDF/UA formats. You can also merge or split the PDF document, rotate its pages, and add annotations or bookmarks. カスタムの透かしもPDFにスタンプできます。

Razorコンポーネントを追加し、Person.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>

さらに、この方法でPDFを生成することで、RenderingOptionsのすべての機能に完全にアクセスできます。 これには、テキスト、HTMLヘッダーとフッターを挿入する機能が含まれます。 さらに、ページ番号を追加し、ページの寸法とレイアウトをお好みに調整することもできます。

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

• 「共有フォルダー」に移動し、NavMenu.razorを開きます。
• Personという我々のRazorコンポーネントを開くセクションを追加します。 我々の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>

プロジェクトを実行する

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