IronPDFを使用してBlazor PDFビューアーを作成する方法

Blazor サーバー プロジェクトで IronPDF をセットアップするにはどうすればよいですか?

Blazor サーバー PDF ビューア プロジェクトで IronPDF を開始するには、ほんの数ステップしか必要ありません。 まず、パッケージ マネージャー コンソールを使用して IronPDF NuGet パッケージ をインストールします。

Install-Package IronPdf

または、NuGet パッケージ マネージャー UI を使用して「IronPdf」を検索し、最新バージョンを選択することもできます。

購入の準備ができていませんか？

PM >  Install-Package IronPdf

IronPDF を NuGet でチェックしてください。1000万回以上のダウンロードで、C#によるPDF開発を変革しています。 DLL または Windowsインストーラー をダウンロードすることもできます。

インストール後、Program.cs ファイルにライセンス キーを追加して、完全な機能をアンロックします。

// Program.cs
IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";

// Program.cs
IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";

IRON VB CONVERTER ERROR developers@ironsoftware.com

開発およびテスト用に、IronPDF はライセンス キーなしで動作しますが、生成された PDF に透かしが追加されます。 開発中に透かしを削除するには、無料試用ライセンスを取得できます。 IronPDF は Blazor Server と Blazor WebAssembly の両方のアプリをサポートしているため、デスクトップ、モバイル アプリ、さらには .NET MAUI プロジェクトに PDF の生成と表示を追加できます。

Blazor で URL から PDF ファイルを表示するにはどうすればよいですか?

Blazor で PDF ビューアを作成する最も簡単な方法は、URL を PDF に変換し、それを iframe に表示することです。 IronPDF の ChromePdfRenderer クラスは、Chrome レンダリング エンジン を使用した変換を処理し、元の Web ページからすべてのスタイルと JavaScript 機能を保持します。

ここに URL を PDF としてレンダリングする完全な Razor コンポーネントがあります:

@page "/pdfviewer"
@using IronPdf
<h3>PDF Viewer</h3>
<button @onclick="GeneratePdf" class="btn btn-primary">Load PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}
@code {
    private string pdfDataUri = string.Empty;
    private async Task GeneratePdf()
    {
        var renderer = new ChromePdfRenderer();
        // Convert URL to PDF
        var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");
        // Convert to base64 and create data URI for iframe display
        var base64String = Convert.ToBase64String(pdf.BinaryData);
        pdfDataUri = $"data:application/pdf;base64,{base64String}";
    }
}

@page "/pdfviewer"
@using IronPdf
<h3>PDF Viewer</h3>
<button @onclick="GeneratePdf" class="btn btn-primary">Load PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}
@code {
    private string pdfDataUri = string.Empty;
    private async Task GeneratePdf()
    {
        var renderer = new ChromePdfRenderer();
        // Convert URL to PDF
        var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");
        // Convert to base64 and create data URI for iframe display
        var base64String = Convert.ToBase64String(pdf.BinaryData);
        pdfDataUri = $"data:application/pdf;base64,{base64String}";
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

RenderUrlAsPdfAsync メソッドは、Web ページコンテンツをフェッチし、PDF 形式に変換して、Blazor PDF ビューア コンポーネントにレンダリングします。 このアプローチはデスクトップと携帯電話で機能し、PDF のナビゲーション、ズーム、印刷用の組み込みツールバーを備えています。 読み込まれた PDF ドキュメントは、次の出力画像で表示されるように見えるはずです:

PDF の生成をカスタマイズするにはどうすればよいですか?

IronPDF は、Blazor PDF ビューア コンポーネントの ChromePdfRenderOptions クラスを介して広範なカスタマイズ オプションを提供します。 ヘッダー、フッターを追加し、マージンを調整し、ページレイアウトを制御して、プロフェッショナルな外観のドキュメントを作成できます。 ドキュメントでレンダリングオプションについてさらに学びましょう。

@page "/pdfcustom"
@using IronPdf
<h3>Customized PDF Viewer</h3>
<button @onclick="GenerateCustomizedPdf" class="btn btn-primary">Generate Customized PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}
@code {
    private string pdfDataUri = string.Empty;
    private async Task GenerateCustomizedPdf()
    {
        var renderer = new ChromePdfRenderer();
        // Assign rendering options to the renderer
        renderer.RenderingOptions = new ChromePdfRenderOptions
        {
            PaperSize = IronPdf.Rendering.PdfPaperSize.A4,
            MarginTop = 25,
            MarginBottom = 25,
            MarginLeft = 20,
            MarginRight = 20,
            // Add header with title
            TextHeader = new TextHeaderFooter
            {
                CenterText = "Monthly Report - {date}",
                FontSize = 12
            },
            // Add footer with page numbers
            TextFooter = new TextHeaderFooter
            {
                LeftText = "Confidential",
                RightText = "Page {page} of {total-pages}",
                FontSize = 10
            }
        };
        // Now generate with options applied
        var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
        // Display in iframe
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

@page "/pdfcustom"
@using IronPdf
<h3>Customized PDF Viewer</h3>
<button @onclick="GenerateCustomizedPdf" class="btn btn-primary">Generate Customized PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}
@code {
    private string pdfDataUri = string.Empty;
    private async Task GenerateCustomizedPdf()
    {
        var renderer = new ChromePdfRenderer();
        // Assign rendering options to the renderer
        renderer.RenderingOptions = new ChromePdfRenderOptions
        {
            PaperSize = IronPdf.Rendering.PdfPaperSize.A4,
            MarginTop = 25,
            MarginBottom = 25,
            MarginLeft = 20,
            MarginRight = 20,
            // Add header with title
            TextHeader = new TextHeaderFooter
            {
                CenterText = "Monthly Report - {date}",
                FontSize = 12
            },
            // Add footer with page numbers
            TextFooter = new TextHeaderFooter
            {
                LeftText = "Confidential",
                RightText = "Page {page} of {total-pages}",
                FontSize = 10
            }
        };
        // Now generate with options applied
        var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
        // Display in iframe
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

テンプレート変数（{page}、{total-pages}、{date} など）は、Blazor PDF ビューアでの PDF 生成中に自動的に実際の値に置き換えられます。 HtmlHeader と HtmlFooter プロパティを使用して、HTML コンテンツを含むより複雑なレイアウトを作成することもできます。 これにより、Blazor PDF ビューアは、必要な場合に適切なレイアウト、ブランディング、フォームフィールドを備えた高性能ドキュメントをレンダリングできるようになります。 ヘッダーとフッターの詳細なカスタマイズについては、ヘッダーとフッターのガイドを参照してください。

PDF ダウンロードを有効にする最良の方法は何ですか?

iframe を使用して Blazor で PDF を表示することは、表示には適していますが、ユーザーはドキュメントをダウンロードする必要があることがよくあります。 これを実装するには、JavaScript InterOp を使用してブラウザのダウンロードをトリガーできます。 詳細なダウンロードオプションについては、PDF のエクスポートと保存ガイドをご覧ください:

@page "/pdfdownload"
@using IronPdf
@inject IJSRuntime JSRuntime
<h3>Download PDF</h3>
<button @onclick="DownloadPdf" class="btn btn-success">Download PDF</button>
@code {
    private async Task DownloadPdf()
    {
        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
        using var streamRef = new DotNetStreamReference(stream: new MemoryStream(pdf.BinaryData));
        await JSRuntime.InvokeVoidAsync("downloadFileFromStream", "invoice.pdf", streamRef);
    }
}

@page "/pdfdownload"
@using IronPdf
@inject IJSRuntime JSRuntime
<h3>Download PDF</h3>
<button @onclick="DownloadPdf" class="btn btn-success">Download PDF</button>
@code {
    private async Task DownloadPdf()
    {
        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
        using var streamRef = new DotNetStreamReference(stream: new MemoryStream(pdf.BinaryData));
        await JSRuntime.InvokeVoidAsync("downloadFileFromStream", "invoice.pdf", streamRef);
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

この JavaScript 関数を _Host.cshtml ファイルに追加します (Microsoft の Blazor JavaScript InterOp ドキュメントで説明されているように):

<script>
    window.downloadFileFromStream = async (fileName, contentStreamReference) => {
        const arrayBuffer = await contentStreamReference.arrayBuffer();
        const blob = new Blob([arrayBuffer]);
        const url = URL.createObjectURL(blob);
        const anchorElement = document.createElement('a');
        anchorElement.href = url;
        anchorElement.download = fileName ?? '';
        anchorElement.click();
        anchorElement.remove();
        URL.revokeObjectURL(url);
    }
</script>

<script>
    window.downloadFileFromStream = async (fileName, contentStreamReference) => {
        const arrayBuffer = await contentStreamReference.arrayBuffer();
        const blob = new Blob([arrayBuffer]);
        const url = URL.createObjectURL(blob);
        const anchorElement = document.createElement('a');
        anchorElement.href = url;
        anchorElement.download = fileName ?? '';
        anchorElement.click();
        anchorElement.remove();
        URL.revokeObjectURL(url);
    }
</script>

IRON VB CONVERTER ERROR developers@ironsoftware.com

Razor コンポーネントから PDF を生成するにはどうすればよいですか?

Blazor で PDF を表示するための最も強力な機能の 1 つは、HTML コンテンツ（動的データを含む）から直接 PDF を生成することです。 このアプローチは、請求書、レポート、またはデータ駆動型ドキュメントを作成するのに最適です。 HTML から PDF への変換に関するガイドを確認して、より高度なテクニックを学んでください:

@page "/invoicedemo"
@using IronPdf
<h3>Invoice Generator</h3>
<button @onclick="GenerateInvoice" class="btn btn-primary">Generate Invoice PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}
@code {
    private string pdfDataUri = string.Empty;
    private async Task GenerateInvoice()
    {
        var invoiceHtml = $@"
            <html>
            <head>
                <style>
                    body {{ font-family: Arial, sans-serif; }}
                    .header {{ background-color: #f0f0f0; padding: 20px; }}
                    .invoice-table {{ width: 100%; border-collapse: collapse; }}
                    .invoice-table th, .invoice-table td {{ border: 1px solid #ddd; padding: 8px; }}
                    .total {{ font-weight: bold; font-size: 18px; }}
                </style>
            </head>
            <body>
                <div class='header'>
                    <h1>Invoice #INV-2024-001</h1>
                    <p>Date: {DateTime.Now:MM/dd/yyyy}</p>
                </div>
                <table class='invoice-table'>
                    <thead>
                        <tr>
                            <th>Item</th>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>IronPDF License</td>
                            <td>1</td>
                            <td>$799</td>
                            <td>$799</td>
                        </tr>
                        <tr>
                            <td>Priority Support</td>
                            <td>1</td>
                            <td>$250</td>
                            <td>$250</td>
                        </tr>
                    </tbody>
                </table>
                <p class='total'>Total Amount: $1,199</p>
            </body>
            </html>";
        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync(invoiceHtml);
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

@page "/invoicedemo"
@using IronPdf
<h3>Invoice Generator</h3>
<button @onclick="GenerateInvoice" class="btn btn-primary">Generate Invoice PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}
@code {
    private string pdfDataUri = string.Empty;
    private async Task GenerateInvoice()
    {
        var invoiceHtml = $@"
            <html>
            <head>
                <style>
                    body {{ font-family: Arial, sans-serif; }}
                    .header {{ background-color: #f0f0f0; padding: 20px; }}
                    .invoice-table {{ width: 100%; border-collapse: collapse; }}
                    .invoice-table th, .invoice-table td {{ border: 1px solid #ddd; padding: 8px; }}
                    .total {{ font-weight: bold; font-size: 18px; }}
                </style>
            </head>
            <body>
                <div class='header'>
                    <h1>Invoice #INV-2024-001</h1>
                    <p>Date: {DateTime.Now:MM/dd/yyyy}</p>
                </div>
                <table class='invoice-table'>
                    <thead>
                        <tr>
                            <th>Item</th>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>IronPDF License</td>
                            <td>1</td>
                            <td>$799</td>
                            <td>$799</td>
                        </tr>
                        <tr>
                            <td>Priority Support</td>
                            <td>1</td>
                            <td>$250</td>
                            <td>$250</td>
                        </tr>
                    </tbody>
                </table>
                <p class='total'>Total Amount: $1,199</p>
            </body>
            </html>";
        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync(invoiceHtml);
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

この方法では、アプリケーションデータからピクセルパーフェクトなドキュメントを作成できるように、Blazor PDF ビューアのコンテンツとスタイルを完全に制御できます。 より複雑な HTML レンダリング シナリオについては、HTML から PDF へのチュートリアルをご覧ください。

その他の PDF 操作は何ができますか?

IronPDF は、基本的なビューイング以上の多数のツールと拡張機能を提供します:

• PDF ページを 1 つのドキュメントにマージする
• 注釈と編集機能を追加する
• パスワード保護およびセキュリティを適用する
• アップロードを有効にし、動的にテーブルレポートを作成する

これらの各機能は、Blazor PDF ビューア コンポーネントで可能なことの概要を拡張し、開発者にデータ、プロジェクト ワークフロー、およびアプリケーション例を完全に制御できるようにします。 For more detailed information on these features, check out the guides on merging PDFs, watermarking, and PDF security.

結論

これで、IronPDF を使用して Blazor サーバー アプリケーションに PDF ビューアを実装するための基盤が構築されました。 基本的な URL レンダリングから動的コンポーネントベースの生成まで、IronPDF は最新の Web アプリケーションでの PDF 要件を処理するために必要なツールを提供します。 追加の Blazor 開発リソースについては、Microsoft の公式 Blazor ドキュメントを参照することを検討してください。

IronPDF の Chrome レンダリング エンジンと Blazor のコンポーネント モデルを組み合わせることで、外部 PDF ビューアまたはプラグインを使用せずに、ブラウザで直接プロフェッショナルな PDF ドキュメントを生成および表示するための強力なソリューションが提供されます。

Blazor アプリケーションに PDF 機能を実装する準備はできましたか? 無料試用版を開始して、プロジェクトに最適なものを見つけてください。