BlazorでIronPDFを使用したPDF生成方法 | IronPDF

IronPDF on Blazor Server App (HTML to PDF Tutorial)

This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDFは.NET 6でサポートされ、Blazorのようなプロジェクトタイプが含まれています。 Visual Studioを使用して、BlazorサーバーアプリプロジェクトにIronPDFを追加し、以下の例で示されているように使用できます。

クイックスタート: BlazorサーバーでのPDFの簡単レンダリング

BlazorサーバーアプリケーションでIronPDFを使い始めましょう。 この例は、最小限の設定でHTMLコンテンツをPDFにレンダリングする方法を示しています。わずか数行のコードで、BlazorコンポーネントをプロフェッショナルなPDFに変換します。 BlazorプロジェクトにPDF機能をシームレスに統合したい開発者に最適です。

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet Package Manager

    PM > Install-Package IronPdf

  2. Copy and run this code snippet.

    IronPdf.HtmlToPdf.RenderHtmlAsPdf(htmlContent).SaveAs(outputPath);
  3. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer
class="hsg-featured-snippet">

最小ワークフロー(5ステップ)

  1. Blazorアプリケーション向けのHTML-to-PDFライブラリをインストールする
  2. Visual Studioで新しいBlazorプロジェクトを作成します。
  3. URLでWebページをPDFドキュメントに変換
  4. クライアントのWebブラウザにWebページをレンダリング
  5. HTML文字列からPDFドキュメントを表示

新しいBlazorサーバープロジェクトを作成

新しいプロジェクトを作成し、Blazorサーバーアプリのタイプを選択します。

class="content-img-align-center">
class="center-image-wrapper"> Blazor Create Project Image

BlazorプロジェクトにIronPDFをインストール

プロジェクトを作成した後、次の手順に従ってVisual Studio内でNuGetからIronPDFライブラリをインストールします。

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

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

Install-Package IronPdf

新しいRazorコンポーネントを追加

IronPDFがBlazorプロジェクトにインストールされたら、新しいRazorコンポーネントを追加することから始めます。 このチュートリアルでは、コンポーネント名を「IronPdfComponent」とします:

class="content-img-align-center">
class="center-image-wrapper"> Blazor IronPDF Component Image

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

@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>
HTML
@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();

        // 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; } = "My new message";
    }
}
@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();

        // 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; } = "My new message";
    }
}
code
If True Then

	' Model to bind user input
	private InputHTMLModel _InputMsgModel = New InputHTMLModel()

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	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();
'
'		' 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
'		var streamRef = New DotNetStreamReference(stream: doc.Stream);
'
'		' Invoke JavaScript function to download the PDF in the browser
'		await JS.InvokeVoidAsync("SubmitHTML", fileName, streamRef);
'	}

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	public class InputHTMLModel
'	{
'		public string HTML
'		{
'			get;
'			set;
'		} = "My new message";
'	}
End If
$vbLabelText   $csharpLabel

BlazorアプリケーションでIronPDFがレンダリングしたPDFをダウンロードできるようにするために、_layout.cshtmlにこのJavaScriptコードを追加します:

<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>
JAVASCRIPT

新しいRazorコンポーネントへのナビゲーションタブを含めるために、Sharedフォルダ内のNavMenu.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>
HTML

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

class="content-img-align-center">
class="center-image-wrapper"> Blazor IronPDF Run Page Image

よくある質問

PDFライブラリはBlazorサーバーアプリにどのように統合されますか?

IronPDFは、.NETアプリケーション、Blazorサーバーアプリを含む、PDF生成と操作を可能にします。HTMLからPDFへの変換のためにVisual StudioとNuGetを使用して統合できます。

BlazorプロジェクトにPDFライブラリをインストールするにはどうすればよいですか?

BlazorプロジェクトにIronPDFをインストールするには、Visual Studioのソリューションエクスプローラーに移動し、「参照」を右クリックして「NuGetパッケージの管理」を選択し、「IronPdf」を検索してインストールします。 代わりに、.NET CLIを使用して dotnet add package IronPdfを使用できます。

PDFライブラリ用の新しいBlazorサーバーアプリを作成する手順は何ですか?

新しいBlazorサーバーアプリを作成するには、Visual Studioを開き、新しいプロジェクトを作成し、Blazorサーバーアプリのテンプレートを選択します。プロジェクトのセットアップ後にIronPDFを統合して、PDF生成を処理します。

BlazorアプリケーションでPDFライブラリを使用してHTMLをPDFにレンダリングする方法は?

IronPDFをインストールした後、新しいRazorコンポーネントを追加し、 IJSRuntimeをインジェクトし、 IronPdf.ChromePdfRendererを使用してHTML入力をPDFドキュメントにレンダリングします。 _layout.cshtmlでJavaScript関数を実装して、生成されたPDFをダウンロードします。

BlazorサーバーサイドアプリケーションでPDFを表示するにはどうすればよいですか?

BlazorサーバーサイドアプリケーションでPDFを表示するには、IronPDFを使用してウェブページをURLでPDFドキュメントに変換し、これらのPDFをクライアントのウェブブラウザにレンダリングします。

BlazorアプリケーションでPDFをダウンロードする際のJavaScriptの役割は何ですか?

JavaScriptは、IronPDFで生成されたPDFをダウンロードするための関数を作成するのに使用されます。PDFコンテンツをBlobに変換し、アンカー要素をプログラム的にクリックしてダウンロードを開始し、ユーザーのデバイスにPDFが保存されるようにします。

BlazorアプリでPDFコンポーネントのナビゲーションタブを追加するにはどうすればよいですか?

PDFコンポーネントのナビゲーションタブを追加するには、共有フォルダ内の NavMenu.razorファイルを編集し、PDFルートに向けた NavLink要素を含めます。

BlazorおよびPDFライブラリのコンテキストでのRazorコンポーネントとは何ですか?

BlazorのRazorコンポーネントは、.razorファイルで定義された再利用可能なUIの一部です。IronPDFのコンテキストでは、HTML入力をPDFに変換するユーザーインターフェイスとロジックを処理するのに使用されます。

BlazorでのPDF生成中に問題をトラブルシューティングするにはどうすればよいですか?

BlazorでPDF生成に問題が発生した場合、IronPDFが正しくインストールされていること、HTML入力が有効であることを確認してください。ファイルダウンロードを処理するためのJavaScript関数が正しく設定されていることを確認してください。

Blazorアプリケーションでウェブページ全体をPDFに変換できますか?

はい、IronPDFを使用すれば、ウェブページ全体をURLからPDFとして変換することができます。

Blazor アプリケーションを構築する場合、IronPDF は .NET 10 と互換性がありますか?

はい。IronPDFは.NET 10と完全に互換性があり、ランタイム、ASP.NET Core、Blazorの機能をサポートしています。.NET 10プロジェクトですぐに使用でき、パフォーマンスの向上と強化された言語機能の恩恵を受けられます。([ironpdf.com](https://ironpdf.com/?utm_source=openai))

Curtis Chau
テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

開発以外にも、CurtisはIoT(Internet of Things)への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。

準備はいいですか?
Nuget ダウンロード 16,154,058 | バージョン: 2025.11 ただ今リリースされました