IronPDF Blazorサーバーチュートリアル：C#でHTMLをPDFにレンダリングする

新しい Blazor Server プロジェクトを作成するには？

新しいプロジェクトを作成し、Blazorサーバーアプリのタイプを選択します。Visual Studioは、PDF生成に.NETを使用できるサーバーサイドBlazorアプリケーションを構築するためのテンプレートを提供します。 Blazor Serverホスティングモデルは、アプリケーションロジックをサーバー上で実行するため、サーバーサイド処理を必要とするPDF生成シナリオに適しています。

BlazorプロジェクトにIronPDFをインストールするには？

プロジェクトを作成した後、以下の手順に従ってIronPDF library from NuGetをVisual Studioにインストールしてください。 IronPDFはHTML文字列、URL、既存のPDFドキュメントからPDFを作成するためのAPIを提供します。

1. Visual Studio のソリューション エクスプローラー ウィンドウで、References を右クリックし、Manage NuGet Packages を選択します。
2. [参照] を選択し、IronPdf を検索します。
3. パッケージの最新バージョンを選択し、プロジェクトのチェックボックスを確認してインストールをクリックします。

または、.NET CLIを使用してインストールできます：

Install-Package IronPdf

特定のプラットフォームをターゲットとするプロジェクトでは、プラットフォーム固有のパッケージが必要になる場合があります。 たとえば、Linuxにデプロイする場合は、Linuxインストールガイドを確認してください。

PDF生成用の新しいRazorコンポーネントを追加するには?

IronPdfをBlazorプロジェクトにインストールしたら、新しいRazorコンポーネントを追加してください。 このチュートリアルでは "IronPdfComponent "と名付けてください。 このコンポーネントは、ユーザー入力を処理し、HTMLコンテンツに基づいて動的にPDFを生成します。 Blazorのコンポーネントアーキテクチャにより、アプリケーション全体で共有できる再利用可能なPDF生成機能を簡単に作成することができます。

その後、コードを以下のように更新します：

@page "/IronPdf"
@inject IJSRuntime JS

<h3>IronPdfComponent</h3>

<EditForm Model="@_InputMsgModel" id="inputText">
  <div>
    <InputTextArea @bind-Value="@_InputMsgModel.HTML" rows="20" />
  </div>
  <div>
    <button type="button" @onclick="@SubmitHTML">Render HTML</button>
  </div>
</EditForm>

@page "/IronPdf"
@inject IJSRuntime JS

<h3>IronPdfComponent</h3>

<EditForm Model="@_InputMsgModel" id="inputText">
  <div>
    <InputTextArea @bind-Value="@_InputMsgModel.HTML" rows="20" />
  </div>
  <div>
    <button type="button" @onclick="@SubmitHTML">Render HTML</button>
  </div>
</EditForm>

@code {

    // Model to bind user input
    private InputHTMLModel _InputMsgModel = new InputHTMLModel();

    private async Task SubmitHTML()
    {
        // Set your IronPDF license key
        IronPdf.License.LicenseKey = "IRONPDF-MYLICENSE-KEY-1EF01";

        // Create a renderer to convert HTML to PDF
        var render = new IronPdf.ChromePdfRenderer();

        // Configure rendering options for better output
        render.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.A4;
        render.RenderingOptions.MarginTop = 40;
        render.RenderingOptions.MarginBottom = 40;

        // Render the HTML input into a PDF document
        var doc = render.RenderHtmlAsPdf(_InputMsgModel.HTML);

        var fileName = "iron.pdf";

        // Create a stream reference for the PDF content
        using var streamRef = new DotNetStreamReference(stream: doc.Stream);

        // Invoke JavaScript function to download the PDF in the browser
        await JS.InvokeVoidAsync("SubmitHTML", fileName, streamRef);
    }

    public class InputHTMLModel
    {
        public string HTML { get; set; } = @"<h1>Welcome to IronPDF</h1>
            <p>This is a sample PDF generated from HTML content in Blazor Server.</p>
            <ul>
                <li>Easy to use API</li>
                <li>High-quality rendering</li>
                <li>Full HTML5 and CSS3 support</li>
            </ul>";
    }
}

@code {

    // Model to bind user input
    private InputHTMLModel _InputMsgModel = new InputHTMLModel();

    private async Task SubmitHTML()
    {
        // Set your IronPDF license key
        IronPdf.License.LicenseKey = "IRONPDF-MYLICENSE-KEY-1EF01";

        // Create a renderer to convert HTML to PDF
        var render = new IronPdf.ChromePdfRenderer();

        // Configure rendering options for better output
        render.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.A4;
        render.RenderingOptions.MarginTop = 40;
        render.RenderingOptions.MarginBottom = 40;

        // Render the HTML input into a PDF document
        var doc = render.RenderHtmlAsPdf(_InputMsgModel.HTML);

        var fileName = "iron.pdf";

        // Create a stream reference for the PDF content
        using var streamRef = new DotNetStreamReference(stream: doc.Stream);

        // Invoke JavaScript function to download the PDF in the browser
        await JS.InvokeVoidAsync("SubmitHTML", fileName, streamRef);
    }

    public class InputHTMLModel
    {
        public string HTML { get; set; } = @"<h1>Welcome to IronPDF</h1>
            <p>This is a sample PDF generated from HTML content in Blazor Server.</p>
            <ul>
                <li>Easy to use API</li>
                <li>High-quality rendering</li>
                <li>Full HTML5 and CSS3 support</li>
            </ul>";
    }
}

このコンポーネントは、PDF生成にChromePdfRendererクラスを使用します。 カスタム用紙サイズ、余白、ヘッダー/フッターなど、さまざまなオプションでレンダリングをカスタマイズできます。

BlazorアプリケーションでIronPDFによってレンダリングされた PDF のダウンロードを許可するには、次 for JavaScriptコードを _layout.cshtml に追加します。

<script>
    // JavaScript function to download PDFs generated by IronPdf
    window.SubmitHTML = async (fileName, contentStreamReference) => {
        // Get the PDF content as an ArrayBuffer
        const arrayBuffer = await contentStreamReference.arrayBuffer();

        // Create a Blob from the ArrayBuffer
        const blob = new Blob([arrayBuffer]);

        // Create an object URL for the Blob
        const url = URL.createObjectURL(blob);

        // Create an anchor element to initiate the download
        const anchorElement = document.createElement("a");
        anchorElement.href = url;
        anchorElement.download = fileName ?? "download.pdf";

        // Programmatically click the anchor to start the download
        anchorElement.click();

        // Clean up by removing the anchor and revoking the object URL
        anchorElement.remove();
        URL.revokeObjectURL(url);
    };
</script>

<script>
    // JavaScript function to download PDFs generated by IronPdf
    window.SubmitHTML = async (fileName, contentStreamReference) => {
        // Get the PDF content as an ArrayBuffer
        const arrayBuffer = await contentStreamReference.arrayBuffer();

        // Create a Blob from the ArrayBuffer
        const blob = new Blob([arrayBuffer]);

        // Create an object URL for the Blob
        const url = URL.createObjectURL(blob);

        // Create an anchor element to initiate the download
        const anchorElement = document.createElement("a");
        anchorElement.href = url;
        anchorElement.download = fileName ?? "download.pdf";

        // Programmatically click the anchor to start the download
        anchorElement.click();

        // Clean up by removing the anchor and revoking the object URL
        anchorElement.remove();
        URL.revokeObjectURL(url);
    };
</script>

Shared フォルダー内の NavMenu.razor ファイルを編集して、新しいRazorコンポーネントへのナビゲーション タブを追加します。 以下のコードを追加してください：

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronPdf">
        <span class="oi oi-list-rich" aria-hidden="true"></span> IronPdf
    </NavLink>
</div>

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronPdf">
        <span class="oi oi-list-rich" aria-hidden="true"></span> IronPdf
    </NavLink>
</div>

これがすべて適用されたら、ソリューションを実行し、このように表示されるはずです：

services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        options.MaximumReceiveMessageSize = 10 * 1024 * 1024; // 10MB
        options.ClientTimeoutInterval = TimeSpan.FromSeconds(60);
    });

services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        options.MaximumReceiveMessageSize = 10 * 1024 * 1024; // 10MB
        options.ClientTimeoutInterval = TimeSpan.FromSeconds(60);
    });