使用IRONPDF

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

已更新:九月 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 安装

在 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

$vbLabelText $csharpLabel

对于开发和测试，IronPDF 在没有许可证键的情况下可以工作，但会在生成的 PDF 上添加水印。您可以获取免费试用许可证以在开发期间去除水印。 IronPDF 支持 Blazor Server 和 Blazor WebAssembly 应用程序，因此您可以在桌面、移动应用程序甚至 .NET MAUI 项目中添加 PDF 生成和查看功能。

如何在 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 文件中（如 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

$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 开发资源，请考虑浏览Microsoft 官方 Blazor 文档。

IronPDF 的 Chrome 渲染引擎与 Blazor 的组件模型结合在一起，为直接在浏览器中生成和显示专业 PDF 文档提供了强大的解决方案，消除了对外部 PDF 查看器或插件的需求。

准备在您的 Blazor 应用程序中实现 PDF 功能了吗？开始您的免费试用以找到适合您项目的完美方案。