消息图标
跳至页脚内容
  1. IronPDF
  2. IronPDF博客
  3. 使用IronPDF
  4. Blazor PDF 查看器
使用IRONPDF

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

Curtis Chau
Curtis Chau
已更新:

Blazor PDF 查看器通过将 PDF 文档转换为 base64 数据 URI 并将结果加载到 <iframe> 元素中来内联渲染 PDF 文档。 IronPDF 的 ChromePdfRenderer 功能可在单个异步调用中将 HTML 字符串、实时 URL 或动态内容转换为 PDF 字节，从而使 Blazor Server 和 Blazor WebAssembly 应用程序无需外部查看器插件即可生成和显示完整的 PDF。

商业应用程序经常需要显示发票、合同和报告，而无需将用户重定向到单独的标签页，也无需依赖不同设备上浏览器对 PDF 的支持。 Blazor 的组件模型使得在服务器上生成 PDF、对其进行编码并将其流式传输到任何页面组件变得非常简单，前提是该库能够可靠地处理转换。

本指南涵盖安装、基于 URL 和 HTML 的渲染、使用页眉和页脚进行自定义、使用 JavaScript 互操作进行浏览器下载、Blazor Server 和 Blazor WebAssembly 方法的比较，以及四个扩展操作：合并、注释、密码保护和用户上传的文件显示。 每种技术都提供了 Razor 组件和等效的顶层 C# 示例。

立即开始免费试用 IronPDF ，跟随本指南中的示例进行学习。

如何在 Blazor 项目中开始使用 IronPDF？

开始使用需要安装 NuGet 包并将许可证密钥添加到 Program.cs。 从软件包管理器控制台安装 IronPDF：

Install-Package IronPdf

或者，在 NuGet 程序包管理器 UI 中搜索"IronPdf"，然后选择最新版本。

NuGet 使用 NuGet 安装

PM >  Install-Package IronPdf

在 IronPDF 上查看 NuGet 快速安装。超过 1000 万次下载，它正以 C# 改变 PDF 开发。 您也可以下载 DLL 或 Windows 安装程序。

安装完成后，在进行任何 PDF 操作之前，请将您的许可证密钥添加到 Program.cs：

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";
IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";
IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE"
$vbLabelText   $csharpLabel

IronPDF 与 .NET 10、.NET 9、.NET 8、.NET 6 以及 .NET Framework 4.6.2 及更高版本兼容。 在开发和测试阶段，该库无需许可证密钥即可运行，但会在生成的 PDF 上添加水印。 免费试用许可证会在评估期间移除水印。

IronPDF 同时支持 Blazor Server 和 Blazor WebAssembly 项目。 在 Blazor Server 中，渲染引擎直接在服务器上运行。 在 Blazor WebAssembly 中，PDF 生成需要服务器端 API 端点； 本指南后面的架构部分将解释这两种方法。

如何在 Blazor 中显示来自 URL 的 PDF 文件？

创建 Blazor PDF 查看器的最直接方法是将 URL 转换为 PDF 并将其显示在 <iframe> 中。 IronPDF 的 ChromePdfRenderer 获取网页并将其转换为 PDF 格式，使用与 Google Chrome 相同的Chrome 渲染引擎，忠实地保留 CSS、JavaScript 输出和布局。

剃刀组件方法

以下 Razor 组件将 URL 转换为 PDF 并以内联方式显示。该方法在 Blazor Server 应用的服务器端运行，因此可以使用完整的 Chrome 渲染引擎：

@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 the URL to PDF using the Chrome rendering engine
        var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");
        // Encode the PDF bytes as a base64 data URI for iframe display
        var base64 = Convert.ToBase64String(pdf.BinaryData);
        pdfDataUri = $"data:application/pdf;base64,{base64}";
    }
}

顶级 C# 示例

对于后台服务、控制台应用程序或服务器端 API 端点，相同的转换使用与组件上下文无关的相同 API 调用：

using IronPdf;

var renderer = new ChromePdfRenderer();
// Fetch and convert the target URL to a PDF document
var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");

// Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf");
byte[] pdfBytes = pdf.BinaryData;
using IronPdf;

var renderer = new ChromePdfRenderer();
// Fetch and convert the target URL to a PDF document
var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");

// Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf");
byte[] pdfBytes = pdf.BinaryData;
Imports IronPdf

Dim renderer As New ChromePdfRenderer()
' Fetch and convert the target URL to a PDF document
Dim pdf = Await renderer.RenderUrlAsPdfAsync("https://ironpdf.com")

' Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf")
Dim pdfBytes As Byte() = pdf.BinaryData
$vbLabelText   $csharpLabel

RenderUrlAsPdfAsync 获取页面，执行所有 JavaScript，应用 CSS，并返回一个包含渲染输出的 PdfDocument 对象。 BinaryData 属性公开原始 PDF 字节，用于存储、流式传输或显示。 <iframe> 显示输出时，内置浏览器工具栏可用于缩放、导航和打印。

如何使用 IronPDF 创建 Blazor PDF 查看器：图 1 - URL 到 PDF 查看器输出

如何自定义 PDF 生成？

IronPDF 通过 ChromePdfRenderOptions 类提供输出控制。 您可以设置纸张大小、调整页边距，并向每一页添加文本或 HTML 页眉和页脚。 渲染选项指南涵盖了所有可用属性的完整列表。

剃刀组件方法

以下组件为 A4 纸张配置页边距，并为每页添加页眉和页脚文本。 在调用任何渲染方法之前，请先赋值 RenderingOptions，以便将其全局应用于渲染器实例：

@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
        {
            RenderingOptions = new ChromePdfRenderOptions
            {
                PaperSize = IronPdf.Rendering.PdfPaperSize.A4,
                MarginTop = 25,
                MarginBottom = 25,
                MarginLeft = 20,
                MarginRight = 20,
                // Header with dynamic date replacement
                TextHeader = new TextHeaderFooter
                {
                    CenterText = "Monthly Report - {date}",
                    FontSize = 12
                },
                // Footer with page numbering
                TextFooter = new TextHeaderFooter
                {
                    LeftText = "Confidential",
                    RightText = "Page {page} of {total-pages}",
                    FontSize = 10
                }
            }
        };

        var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

顶级 C# 示例

相同的选项适用于任何 .NET 上下文。 这种模式在 ASP.NET Core 最小 API 或计划报表生成器中非常适用：

using IronPdf;
using IronPdf.Rendering;

var renderer = new ChromePdfRenderer
{
    RenderingOptions = new ChromePdfRenderOptions
    {
        PaperSize = PdfPaperSize.A4,
        MarginTop = 25,
        MarginBottom = 25,
        TextHeader = new TextHeaderFooter { CenterText = "Report - {date}", FontSize = 12 },
        TextFooter = new TextHeaderFooter { RightText = "Page {page} of {total-pages}", FontSize = 10 }
    }
};

var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
pdf.SaveAs("customized-report.pdf");
using IronPdf;
using IronPdf.Rendering;

var renderer = new ChromePdfRenderer
{
    RenderingOptions = new ChromePdfRenderOptions
    {
        PaperSize = PdfPaperSize.A4,
        MarginTop = 25,
        MarginBottom = 25,
        TextHeader = new TextHeaderFooter { CenterText = "Report - {date}", FontSize = 12 },
        TextFooter = new TextHeaderFooter { RightText = "Page {page} of {total-pages}", FontSize = 10 }
    }
};

var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
pdf.SaveAs("customized-report.pdf");
Imports IronPdf
Imports IronPdf.Rendering

Dim renderer As New ChromePdfRenderer With {
    .RenderingOptions = New ChromePdfRenderOptions With {
        .PaperSize = PdfPaperSize.A4,
        .MarginTop = 25,
        .MarginBottom = 25,
        .TextHeader = New TextHeaderFooter With {.CenterText = "Report - {date}", .FontSize = 12},
        .TextFooter = New TextHeaderFooter With {.RightText = "Page {page} of {total-pages}", .FontSize = 10}
    }
}

Dim pdf = Await renderer.RenderUrlAsPdfAsync("https://example.com/report")
pdf.SaveAs("customized-report.pdf")
$vbLabelText   $csharpLabel

模板变量（包括 {page}、{total-pages} 和 {date}）会在渲染时被替换为实际值。对于复杂的品牌布局，请使用 HtmlHeader 和 HtmlFooter 属性，而不是 TextHeader 和 TextFooter。 页眉和页脚指南包含了两种方法的完整示例。

如何使用 IronPDF 创建 Blazor PDF 查看器：图 2 - 在 PDF 查看器中打开的自定义 PDF

启用 PDF 下载的最佳方法是什么？

在 <iframe> 中显示 PDF 文件可以处理查看，但用户通常需要下载文件。JavaScript 互操作性会触发浏览器从 .NET 字节流下载文件。 有关更多下载和导出图案，请参阅导出和保存 PDF 指南。

剃刀组件方法

将 IJSRuntime 注入到组件中，并调用 JavaScript 辅助函数来启动下载。 DotNetStreamReference 会流式传输 PDF 字节，而不会一次性将整个文件加载到 JavaScript 内存中：

@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>");
        // Stream the PDF bytes to the browser as a downloadable file
        using var streamRef = new DotNetStreamReference(stream: new MemoryStream(pdf.BinaryData));
        await JSRuntime.InvokeVoidAsync("downloadFileFromStream", "invoice.pdf", streamRef);
    }
}

按照微软 Blazor JavaScript 互操作文档中的说明，将此 JavaScript 函数添加到您的 _Host.cshtml 或 App.razor 文件中：

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);
};
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);
};
JAVASCRIPT

顶级 C# 示例

在服务器端 API 端点中，使用 Results.File 直接返回 PDF 字节。 浏览器接收到带有正确 Content-Disposition 标头的文件后，会自动触发下载：

using IronPdf;

// ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
    // Return with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "invoice.pdf");
});
using IronPdf;

// ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
    // Return with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "invoice.pdf");
});
Imports IronPdf

' ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", Async Function()
    Dim renderer As New ChromePdfRenderer()
    Dim pdf = Await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>")
    ' Return with file download headers
    Return Results.File(pdf.BinaryData, "application/pdf", "invoice.pdf")
End Function)
$vbLabelText   $csharpLabel

如何从 Razor 组件生成 PDF？

从 HTML 生成 PDF 可以完全控制布局、数据绑定和样式。 这种方法适用于发票、报告以及任何基于实时应用程序数据生成的文档。 有关更高级的渲染技术，请参阅HTML 转 PDF 转换指南。

剃刀组件方法

以下组件根据 C# 数据构建发票 HTML 字符串并将其转换为 PDF。 ChromePdfRenderer 将 HTML 字符串视为网页，应用所有 CSS 并使用 Chrome 引擎进行渲染：

@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-2025-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>$749</td><td>$749</td>
                        </tr>
                        <tr>
                            <td>Priority Support</td><td>1</td><td>$250</td><td>$250</td>
                        </tr>
                    </tbody>
                </table>
                <p class='total'>Total Amount: $999</p>
            </body>
            </html>";

        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync(invoiceHtml);
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

顶级 C# 示例

同样的 HTML 字符串方法适用于任何 .NET 上下文，包括控制台应用程序、后台服务和 API 端点。 C# 字符串插值或模板库会在将字符串传递给渲染器之前插入动态数据：

using IronPdf;

var html = """
    <html>
    <body>
        <h1>Invoice #INV-2025-001</h1>
        <table>
            <tr><th>Item</th><th>Total</th></tr>
            <tr><td>IronPDF License</td><td>$749</td></tr>
            <tr><td>Priority Support</td><td>$250</td></tr>
        </table>
        <p><strong>Total: $999</strong></p>
    </body>
    </html>
    """;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync(html);
pdf.SaveAs("invoice.pdf");
using IronPdf;

var html = """
    <html>
    <body>
        <h1>Invoice #INV-2025-001</h1>
        <table>
            <tr><th>Item</th><th>Total</th></tr>
            <tr><td>IronPDF License</td><td>$749</td></tr>
            <tr><td>Priority Support</td><td>$250</td></tr>
        </table>
        <p><strong>Total: $999</strong></p>
    </body>
    </html>
    """;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync(html);
pdf.SaveAs("invoice.pdf");
Imports IronPdf

Dim html As String = "
    <html>
    <body>
        <h1>Invoice #INV-2025-001</h1>
        <table>
            <tr><th>Item</th><th>Total</th></tr>
            <tr><td>IronPDF License</td><td>$749</td></tr>
            <tr><td>Priority Support</td><td>$250</td></tr>
        </table>
        <p><strong>Total: $999</strong></p>
    </body>
    </html>
    "

Dim renderer As New ChromePdfRenderer()
Dim pdf = Await renderer.RenderHtmlAsPdfAsync(html)
pdf.SaveAs("invoice.pdf")
$vbLabelText   $csharpLabel

RenderHtmlAsPdfAsync 接受任何有效的 HTML 字符串，包括内联 CSS 和嵌入式 JavaScript。 该实现方式可自动处理布局、字体渲染和分页符。

如何使用 IronPDF 创建 Blazor PDF 查看器：图 3 - 在查看器中发票 PDF

Blazor Server PDF 查看器与 Blazor WebAssembly 有何不同？

托管模式决定了 PDF 生成文件的运行位置以及字节如何到达浏览器。 理解这一区别可以避免在构建 Blazor PDF 查看器时常见的架构错误。

Blazor Server在服务器上执行所有 C# 代码。 ChromePdfRenderer 在服务器端运行，并将生成的字节通过现有的 SignalR 连接推送到浏览器。 这是最简单的集成路径，除了前面章节中展示的内容之外，不需要额外的 API 端点或网络调用。

Blazor WebAssembly使用 WASM 在浏览器的沙箱中运行 C# 代码。 IronPDF 的渲染引擎依赖于无法在浏览器沙箱内运行的本地二进制文件，因此 ChromePdfRenderer 无法直接在 WASM 项目中使用。 正确的方法是调用服务器端 API 端点来生成 PDF 文件，并将字节作为响应返回。

为 Blazor WebAssembly 设置 PDF 生成 API

在服务器端，定义一个最小的 API 端点，用于生成并返回 PDF 文件：

// Program.cs (ASP.NET Core host project)
using IronPdf;

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

app.MapGet("/api/pdf/report", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Quarterly Report</h1><p>Generated server-side.</p>");
    // Return PDF bytes with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "report.pdf");
});
// Program.cs (ASP.NET Core host project)
using IronPdf;

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

app.MapGet("/api/pdf/report", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Quarterly Report</h1><p>Generated server-side.</p>");
    // Return PDF bytes with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "report.pdf");
});
Imports IronPdf

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE"

app.MapGet("/api/pdf/report", Async Function()
    Dim renderer = New ChromePdfRenderer()
    Dim pdf = Await renderer.RenderHtmlAsPdfAsync("<h1>Quarterly Report</h1><p>Generated server-side.</p>")
    ' Return PDF bytes with file download headers
    Return Results.File(pdf.BinaryData, "application/pdf", "report.pdf")
End Function)
$vbLabelText   $csharpLabel

在 WASM 客户端上，注入 HttpClient 并调用 API 端点。 Blazor WASM 托管项目模板预配置了 HttpClient 以指向服务器的基本地址：

@page "/wasm-pdf-viewer"
@inject HttpClient Http

<h3>PDF Viewer</h3>
<button @onclick="LoadPdf" class="btn btn-primary">Load Report</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task LoadPdf()
    {
        // Fetch PDF bytes from the server-side generation endpoint
        var bytes = await Http.GetByteArrayAsync("/api/pdf/report");
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(bytes)}";
    }
}

这种模式将所有繁重的渲染工作都保留在服务器端，而 WASM 客户端只负责显示。 对于生产环境，请向 API 端点添加身份验证，并将生成的 PDF 内容限定为已验证用户的数据。

我还能执行哪些其他 PDF 操作？

IronPDF 的 API 功能远不止基本的查看功能。 以下各节涵盖 Blazor 文档工作流中常用的四个操作：合并多个文档、添加注释、应用密码保护和显示用户上传的文件。

如何合并多个PDF文档？

合并功能将多个 PdfDocument 实例合并到一个文件中，可用于组装报告部分、附加附录或连接用户选择的文件。 合并和拆分 PDF 指南涵盖页面级插入和拆分操作。

using IronPdf;

var renderer = new ChromePdfRenderer();

// Generate two separate sections as individual PDF documents
var section1 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 1: Overview</h1>");
var section2 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 2: Details</h1>");

// Merge into a single document preserving all pages
var merged = PdfDocument.Merge(section1, section2);
merged.SaveAs("combined-report.pdf");
using IronPdf;

var renderer = new ChromePdfRenderer();

// Generate two separate sections as individual PDF documents
var section1 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 1: Overview</h1>");
var section2 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 2: Details</h1>");

// Merge into a single document preserving all pages
var merged = PdfDocument.Merge(section1, section2);
merged.SaveAs("combined-report.pdf");
Imports IronPdf

Dim renderer As New ChromePdfRenderer()

' Generate two separate sections as individual PDF documents
Dim section1 = Await renderer.RenderHtmlAsPdfAsync("<h1>Section 1: Overview</h1>")
Dim section2 = Await renderer.RenderHtmlAsPdfAsync("<h1>Section 2: Details</h1>")

' Merge into a single document preserving all pages
Dim merged = PdfDocument.Merge(section1, section2)
merged.SaveAs("combined-report.pdf")
$vbLabelText   $csharpLabel

要在 Blazor 组件中显示合并的文档，请将 merged.BinaryData 传递给前面章节中的 base64 数据 URI 模式。 合并后的 PdfDocument 对象在编码显示之前还可以接受进一步的操作（水印、安全设置或附加页面）。

如何在PDF中添加注释？

注释可以将审阅者的笔记和评论附加到特定的页面位置，而不会更改文档的底层内容。 IronPDF 支持文本注释、自由文本框和其他标记类型。有关完整的注释属性列表，请参阅注释指南。

using IronPdf;
using IronPdf.Annotations;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Contract Document</h1><p>Review required on clause 3.</p>");

// Add a text annotation to page 0 at position (50, 650)
var annotation = new TextAnnotation(pageIndex: 0)
{
    Title = "Reviewer Note",
    Contents = "Please confirm clause 3 before signing.",
    X = 50,
    Y = 650,
    Width = 200,
    Height = 50,
    Printable = false,
    OpenByDefault = true
};

pdf.Annotations.Add(annotation);
pdf.SaveAs("annotated-contract.pdf");
using IronPdf;
using IronPdf.Annotations;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Contract Document</h1><p>Review required on clause 3.</p>");

// Add a text annotation to page 0 at position (50, 650)
var annotation = new TextAnnotation(pageIndex: 0)
{
    Title = "Reviewer Note",
    Contents = "Please confirm clause 3 before signing.",
    X = 50,
    Y = 650,
    Width = 200,
    Height = 50,
    Printable = false,
    OpenByDefault = true
};

pdf.Annotations.Add(annotation);
pdf.SaveAs("annotated-contract.pdf");
Imports IronPdf
Imports IronPdf.Annotations

Dim renderer As New ChromePdfRenderer()
Dim pdf = Await renderer.RenderHtmlAsPdfAsync("<h1>Contract Document</h1><p>Review required on clause 3.</p>")

' Add a text annotation to page 0 at position (50, 650)
Dim annotation As New TextAnnotation(pageIndex:=0) With {
    .Title = "Reviewer Note",
    .Contents = "Please confirm clause 3 before signing.",
    .X = 50,
    .Y = 650,
    .Width = 200,
    .Height = 50,
    .Printable = False,
    .OpenByDefault = True
}

pdf.Annotations.Add(annotation)
pdf.SaveAs("annotated-contract.pdf")
$vbLabelText   $csharpLabel

当 PDF 文件在任何标准查看器（包括浏览器显示）中打开时，注释都会被保留。 对于 Blazor 应用程序，在服务器端运行注解逻辑，并将 pdf.BinaryData 返回给组件进行显示。

如何给PDF文件添加密码保护？

密码保护可限制对财务报告或人事记录等敏感文件的访问。 IronPDF 支持用户密码（打开文档需要密码）和所有者密码（更改权限需要密码）。 该PDF安全指南列出了所有可用的权限标志。

using IronPdf;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Confidential Report</h1>");

// Set the password required to open the document
pdf.Password = "user-open-password";
// Set the owner password to control editing and printing rights
pdf.SecuritySettings.OwnerPassword = "owner-edit-password";
pdf.SecuritySettings.AllowUserPrinting = IronPdf.Security.PdfPrintSecurity.FullPrintRights;
pdf.SecuritySettings.AllowUserCopyPasteContent = false;

pdf.SaveAs("protected-report.pdf");
using IronPdf;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Confidential Report</h1>");

// Set the password required to open the document
pdf.Password = "user-open-password";
// Set the owner password to control editing and printing rights
pdf.SecuritySettings.OwnerPassword = "owner-edit-password";
pdf.SecuritySettings.AllowUserPrinting = IronPdf.Security.PdfPrintSecurity.FullPrintRights;
pdf.SecuritySettings.AllowUserCopyPasteContent = false;

pdf.SaveAs("protected-report.pdf");
Imports IronPdf

Dim renderer As New ChromePdfRenderer()
Dim pdf = Await renderer.RenderHtmlAsPdfAsync("<h1>Confidential Report</h1>")

' Set the password required to open the document
pdf.Password = "user-open-password"
' Set the owner password to control editing and printing rights
pdf.SecuritySettings.OwnerPassword = "owner-edit-password"
pdf.SecuritySettings.AllowUserPrinting = IronPdf.Security.PdfPrintSecurity.FullPrintRights
pdf.SecuritySettings.AllowUserCopyPasteContent = False

pdf.SaveAs("protected-report.pdf")
$vbLabelText   $csharpLabel

受密码保护的 PDF 会在浏览器中显示密码提示 <iframe>。 这种方法适用于通过下载方式分发的文档； 对于无需提示的内联显示，仅对通过下载途径返回的文档应用密码。

如何显示用户上传的PDF文件？

显示用户上传的 PDF 文件需要读取传入的文件字节并将其编码为数据 URI。 下面的上传组件使用 Blazor 的 InputFile 控件来捕获文件，然后直接显示该文件，无需重新渲染：

@page "/upload-viewer"
@using IronPdf

<h3>Upload and View a PDF</h3>
<InputFile OnChange="LoadUploadedPdf" accept=".pdf" />
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task LoadUploadedPdf(InputFileChangeEventArgs e)
    {
        using var stream = e.File.OpenReadStream(maxAllowedSize: 10 * 1024 * 1024);
        using var ms = new MemoryStream();
        await stream.CopyToAsync(ms);
        var bytes = ms.ToArray();
        // Encode the uploaded PDF bytes directly for display
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(bytes)}";
    }
}

对于需要在显示前进行服务器端处理的上传 PDF 文件，例如添加水印、提取页面或重新加密，请先将字节加载到 PdfDocument 中：

var pdf = new PdfDocument(bytes);
// Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
var pdf = new PdfDocument(bytes);
// Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
Dim pdf As New PdfDocument(bytes)
' Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}"
$vbLabelText   $csharpLabel

这样既能保持组件结构不变，又能对上传的文件启用完整的 IronPDF API。

我的下一个步骤是什么？

本指南涵盖了使用 IronPDF 构建 Blazor PDF 查看器的完整工作流程：在 .NET 10 上安装、URL 和 HTML 渲染、使用页眉和页脚自定义输出、用于浏览器下载的 JavaScript 互操作、Blazor Server 和 Blazor WebAssembly 之间的架构差异，以及四种文档操作：合并、注释、密码保护和用户上传。

为了进一步拓展这一基础，请探索以下资源：

获取免费试用许可证，即可去除水印并在 Blazor 应用程序中测试 IronPDF。 IronPDF 支持.NET 10 、ASP.NET Core、Blazor Server 和托管的 Blazor WebAssembly 项目，无需额外配置。 有关更多集成指导，请参阅微软官方 Blazor 文档。

常见问题解答

什么是 Blazor PDF 查看器？

Blazor PDF查看器是一个组件，用于在Blazor Server或WebAssembly应用程序中内嵌显示PDF文档。通常将PDF字节转换为base64数据URI，并将在iFrame元素中呈现，提供用户一个内置的浏览器工具栏用于缩放、导航和打印。

如何在Blazor Server应用程序中显示PDF？

通过NuGet安装IronPDF，将您的许可证密钥添加到Program.cs，然后使用ChromePdfRenderer从URL或HTML字符串生成PDF字节。将字节编码为base64数据URI，并将其分配给Razor组件中iframe的src属性。

IronPDF可以在Blazor WebAssembly项目中运行吗？

IronPDF的渲染引擎需要原生二进制文件，无法在浏览器的WASM沙箱中运行。对于Blazor WebAssembly项目，创建一个服务器端ASP.NET Core API端点，用IronPDF生成PDF并返回字节。WASM客户端通过HttpClient调用该端点并显示结果。

如何在Blazor中触发PDF下载？

将IJSRuntime注入到组件中，使用IronPDF生成PDF字节，将其包装在DotNetStreamReference中，并使用InvokeVoidAsync调用JavaScript函数。JavaScript函数创建Blob URL并点击锚元素以触发浏览器下载。

使用IronPDF进行Blazor PDF查看有哪些优势？

IronPDF使用Chrome渲染引擎，精确地将HTML、CSS和JavaScript输出转换为PDF格式。它支持.NET 10，在Blazor Server和WebAssembly架构中工作，提供单一API用于PDF生成、合并、注释、密码保护和用户上传处理。

如何在Blazor中向生成的PDF添加页眉和页脚？

在调用渲染方法之前，设置ChromePdfRenderer的RenderingOptions属性。使用TextHeader和TextFooter用于纯文本页眉和页脚，带有模板变量如{page}、{total-pages}和{date}。对于基于HTML的布局，使用HtmlHeader和HtmlFooter。

如何在Blazor中合并多个PDF文档？

使用ChromePdfRenderer将每个文档生成为PdfDocument实例，然后调用PdfDocument.Merge(pdf1, pdf2)来合并它们。将合并文档的BinaryData传递到Blazor组件的base64数据URI中以显示合并结果。

我可以在Blazor中显示用户上传的PDF而不保存到磁盘吗？

是的。使用Blazor的InputFile组件将上传的文件读入MemoryStream，将字节转换为base64数据URI，并将其分配给iFrame的src属性。无需文件系统写入。对于服务器端处理，在编码之前将字节加载到PdfDocument实例中。

如何对在Blazor中生成的PDF应用密码保护？

生成PdfDocument后，设置Password属性用于用户打开密码，并使用SecuritySettings.OwnerPassword设置所有者密码。在保存或编码文档之前，使用SecuritySettings.AllowUserPrinting和AllowUserCopyPasteContent来控制权限。

IronPDF 是否兼容 .NET 10 的 Blazor PDF 查看器项目？

是的。IronPDF支持.NET 10、.NET 9、.NET 8、.NET 6和.NET Framework 4.6.2及以上版本。在面向.NET 10的Blazor应用程序中使用IronPDF无需特殊配置。

Curtis Chau
Curtis Chau
  立即与工程团队聊天
技术作家

Curtis Chau 拥有卡尔顿大学的计算机科学学士学位，专注于前端开发，精通 Node.js、TypeScript、JavaScript 和 React。他热衷于打造直观且美观的用户界面，喜欢使用现代框架并创建结构良好、视觉吸引力强的手册。

除了开发之外，Curtis 对物联网 (IoT) 有浓厚的兴趣，探索将硬件和软件集成的新方法。在空闲时间，他喜欢玩游戏和构建 Discord 机器人，将他对技术的热爱与创造力相结合。

相关文章

30天试用 → 完整产品。无限制。无卡。 免费试用

钢铁支援团队

我们每周 5 天，每天 24 小时在线。
聊天
电子邮件
打电话给我