使用IRONPDF

如何使用IronPDF創建Blazor PDF查看器

更新日期:9月 22, 2025

在 Blazor Server 應用程式中創建 Blazor PDF 檢視器是展示發票、報告和文件在瀏覽器中顯示的商業應用程式中常見的需求。本指南說明如何使用IronPDF在 Blazor 中設定一個功能齊全的 PDF 檢視器。它允許您輕鬆在 Blazor 專案中生成、定制和打開 PDF 文件。

與第三方瀏覽器工具不同，IronPDF 的內建工具讓創建強大的 PDF 檢視器變得簡單，如縮放、導航、文字選擇和列印。開發人員還可以添加功能，如填表、註釋和逆時針旋轉載入的 PDF 文件以改變方向。

立即開始使用 IronPDF，改變 Blazor 應用程式處理 PDF 文檔的方式。

如何在 Blazor Server 專案中設定 IronPDF？

要在 Blazor Server PDF 檢視器專案中開始使用 IronPDF，只需要幾個步驟。首先，使用套件管理器控制台安裝IronPDF NuGet 套件：

Install-Package IronPdf

或者，您可以使用 NuGet 套件管理器 UI，搜尋 "IronPdf" 並選擇最新版本。

用 NuGet 安裝

在 NuGet 查看 https://www.nuget.org/packages/IronPdf 以快速安裝。超過 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

$vbLabelText $csharpLabel

在開發和測試中，IronPDF 可以在無授權密鑰時運行，但會在生成的 PDF 上添加浮水印。您可以獲取免費試用授權在開發期間移除浮水印。 IronPDF 支持 Blazor Server 和 Blazor WebAssembly 應用，因此您可以將 PDF 生成功能和檢視功能添加到桌面、移動應用或 .NET MAUI 專案中。

如何在 Blazor 中從 URL 顯示 PDF 文件？

在 Blazor 中創建 PDF 檢視器的最直接方法是將 URL 轉換為 PDF，並在 iframe 中顯示。 IronPDF 的 ChromePdfRenderer 類使用Chrome 渲染引擎進行轉換，保持原網頁的所有樣式和 JavaScript 功能。

以下是一個完整的 Razor 組件，將 URL 渲染為 PDF：

@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

$vbLabelText $csharpLabel

RenderUrlAsPdfAsync 方法獲取網頁內容，將其轉換為 PDF 格式，然後在您的 Blazor PDF 檢視器組件中渲染。此方法適用於桌面和手機，並內建工具欄供導航、縮放和列印 PDF。載入的 PDF 文件應顯示如下圖所示的輸出圖像：

如何使用 IronPDF 創建 Blazor PDF 檢視器：圖 1 - URL 到 PDF 檢視器輸出

如何自定義 PDF 生成功能？

IronPDF 通過 ChromePdfRenderOptions 類為 Blazor PDF 檢視器組件提供廣泛的自定義選項。您可以添加頁眉、頁腳、調整邊距、控制頁面佈局以創建專業外觀的文檔。在檔中了解更多渲染選項。

@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

$vbLabelText $csharpLabel

模板變數，如 {page}, {total-pages}, 和 {date}，在 Blazor PDF 檢視器中生成 PDF 時會自動替換為實際值。您還可以使用 HtmlHeader 和 HtmlFooter 屬性來實現更為複雜的 HTML 內容佈局。這可確保您的 Blazor PDF 檢視器可以渲染高性能文檔、適當的佈局、品牌和需要的表單字段。有關詳細的頁眉和頁腳自定義，請參閱頁眉和頁腳指南。

如何使用 IronPDF 創建 Blazor PDF 檢視器：圖 2 - 自定義 PDF 打開於 PDF 檢視器中

啟用 PDF 下載的最佳方法是什麼？

雖然在 Blazor 中使用 iframe 檢視 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

$vbLabelText $csharpLabel

將此 JavaScript 函數添加到 _Host.cshtml 文件中（如微軟的 BlazorJavaScript 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

$vbLabelText $csharpLabel

如何從 Razor 组件生成 PDF？

在 Blazor 中顯示 PDF 的一個最強大的功能是直接從 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

$vbLabelText $csharpLabel

這種方法讓您完全控制 Blazor PDF 檢視器中的 PDF 內容和樣式，允許您從應用數據中創建像素完美的文檔。有關複雜的 HTML 渲染場景，請探索我們的HTML 到 PDF 教程。

如何使用 IronPDF 來創建 Blazor PDF 檢視器：圖 3 - 檢視器中的發票 PDF

我可以執行哪些其他 PDF 操作？

除了基本檢視功能，IronPDF 還提供許多其他工具和擴展：

將多個 PDF 頁面合併為一個文件
添加註釋和編輯功能
應用密碼保護和安全設置
啟用上傳並動態創建表格報告

這些功能延展了在 Blazor PDF 檢視器組件中的可能性，賦予開發者對數據、項目工作流程和示例應用的完全控制。 For more detailed information on these features, check out the guides on merging PDFs, watermarking, and PDF security.

結論

您現在擁有了一個使用 IronPDF 在 Blazor Server 應用程式中實現 PDF 檢視器的基礎。從基本的 URL 渲染到基於動態组件的生成，IronPDF 提供了滿足現代 Web 應用程式 PDF 需求的工具。欲獲取更多 Blazor 開發資源，請考慮瀏覽微軟官方的 Blazor 文档。

IronPDF 的 Chrome 渲染引擎與 Blazor 的组件模型結合創造了一個強大的解決方案，允許直接在瀏覽器中生成和顯示專業的 PDF 文檔，無需外部 PDF 檢視器或插件。

準備好實施 PDF 功能在您的 Blazor 應用程式中嗎？開始您的免費試用，尋找適合您專案的最佳方案。