使用 Telerik Blazor PDF 查看器功能增强您的应用程序

为什么要将Telerik UI与IronPDF结合使用？

Telerik Blazor PDF查看器在显示PDF方面表现出色，具备文本搜索、缩放控制和可自定义工具栏等功能。 但是，当您需要从 HTML、URL 或 Razor 视图动态生成 PDF 文件时，IronPDF 提供了基于 Chrome 的渲染引擎，而 Telerik UI 的文档处理库中并未包含该引擎。 IronPDF 的 Chrome 渲染引擎可确保在将网页内容转换为 PDF 时达到像素级的精确度。

这种混合方法让您既可以使用 IronPDF 出色的 PDF 创建功能，又可以使用 Telerik 精致的 UI 组件进行显示。 在对旧版 Web 项目进行现代化改造或创建需要生成和查看功能的 Blazor PDF 解决方案时，它尤其有效。 您还可以在显示生成的 PDF 文件之前，为其添加页眉和页脚、应用水印以及设置自定义边距。

如何安装和设置项目？

在 Blazor 项目中设置这两个库需要安装必要的 NuGet 包。 您可以使用程序包管理器控制台或 .NET CLI。 IronPDF 可在NuGet.org上获取，并可与 .NET 10 及更高版本配合使用。 更多详情请参阅IronPDF NuGet 安装指南。

Install-Package IronPdf
dotnet add package IronPdf

Install-Package IronPdf
dotnet add package IronPdf

安装完成后，请配置您的 Program.cs 以添加服务：

builder.Services.AddTelerikBlazor();
builder.Services.AddSingleton<ChromePdfRenderer>();

builder.Services.AddTelerikBlazor();
builder.Services.AddSingleton<ChromePdfRenderer>();

此配置在您的应用程序中启用Telerik UI for Blazor组件和IronPDF的渲染功能。 已经熟悉 Telerik 的套件用户会发现此集成非常简单。 对于更复杂的场景，您可能需要探索异步 PDF 生成或自定义日志记录配置。

如何使用 IronPDF 创建用于显示的 PDF 文档？

IronPDF将HTML内容转换为Telerik PDF查看器可显示的PDF文件。 以下是如何从 HTML 生成 PDF 并使其可供查看的方法。 您还可以将 HTML 字符串转换为 PDF或直接渲染 HTML 文件：

@page "/generate-pdf"
@inject ChromePdfRenderer Renderer
@code {
    private byte[] pdfData;
    private async Task GeneratePDF()
    {
        // Create PDF from HTML content
        var pdf = await Renderer.RenderHtmlAsPdfAsync(@"
            <h1>Invoice Report</h1>
            <table>
                <tr><td>Item</td><td>Amount</td></tr>
                <tr><td>Service</td><td>$100</td></tr>
            </table>");
        // Convert to byte array for Telerik viewer
        pdfData = pdf.BinaryData;
    }
}

@page "/generate-pdf"
@inject ChromePdfRenderer Renderer
@code {
    private byte[] pdfData;
    private async Task GeneratePDF()
    {
        // Create PDF from HTML content
        var pdf = await Renderer.RenderHtmlAsPdfAsync(@"
            <h1>Invoice Report</h1>
            <table>
                <tr><td>Item</td><td>Amount</td></tr>
                <tr><td>Service</td><td>$100</td></tr>
            </table>");
        // Convert to byte array for Telerik viewer
        pdfData = pdf.BinaryData;
    }
}

Imports System.Threading.Tasks
Imports Microsoft.AspNetCore.Components
Imports DinkToPdf

@page "/generate-pdf"
@inject ChromePdfRenderer Renderer

@code
    Private pdfData As Byte()

    Private Async Function GeneratePDF() As Task
        ' Create PDF from HTML content
        Dim pdf = Await Renderer.RenderHtmlAsPdfAsync("
            <h1>Invoice Report</h1>
            <table>
                <tr><td>Item</td><td>Amount</td></tr>
                <tr><td>Service</td><td>$100</td></tr>
            </table>")
        ' Convert to byte array for Telerik viewer
        pdfData = pdf.BinaryData
    End Function
End Code

这段代码会生成一个可供显示的PDF文档。 IronPDF 的渲染引擎确保您的 HTML、CSS 和 JavaScript 内容完美渲染，并在用户通过 PDF 查看器组件查看时保持所有格式。 您还可以向 PDF 添加图像、嵌入 Azure Blob 存储中的图像，或直接将图像转换为 PDF。 探索IronPDF 的全部功能，了解其可能性。

ChromePdfRenderer 类提供了丰富的自定义选项。 您可以设置页面大小、边距、页眉、页脚，并为印刷媒体定义自定义 CSS——这些功能是对 Telerik 查看功能的补充。 对于高级场景，请探索分页符控制、视口配置或基本 URL 设置，以正确加载资源。

生成的 PDF 看起来像什么？

生成的PDF将类似于这样：

这是一个PDF文档查看器，显示了一个包含"项目"和"金额"列的表格发票报告，其中显示了一项金额为100美元的服务条目，展示了IronPDF的HTML转PDF渲染功能，格式清晰，布局专业。

如何集成 Telerik 的 PDF 查看器 Blazor 组件？

使用 IronPDF 生成 PDF 文件后，使用 Telerik Blazor PDF 查看器显示该文件非常简单：

<TelerikPdfViewer Data="@pdfData"
                  Height="600px"
                  Zoom="1.0">
    <PdfViewerToolBar>
        <PdfViewerToolBarPagerTool />
        <PdfViewerToolBarZoomTool />
        <PdfViewerToolBarSearchTool />
        <PdfViewerToolBarDownloadTool />
    </PdfViewerToolBar>
</TelerikPdfViewer>

<TelerikPdfViewer Data="@pdfData"
                  Height="600px"
                  Zoom="1.0">
    <PdfViewerToolBar>
        <PdfViewerToolBarPagerTool />
        <PdfViewerToolBarZoomTool />
        <PdfViewerToolBarSearchTool />
        <PdfViewerToolBarDownloadTool />
    </PdfViewerToolBar>
</TelerikPdfViewer>

此组件配置提供了与PDF互动的基本工具。 工具栏包括导航按钮、缩放级别控制和搜索功能。 您可以根据应用需求定制显示哪些工具。 Data 属性提供要显示的 PDF 值。 为了提高功能性，您可能需要实现文本提取或 PDF 搜索功能。

Telerik UI for Blazor查看器自动处理浏览器兼容性，在现代浏览器中无需插件即可使用。 对于使用.NET MAUI的桌面应用程序，这两个库都支持跨平台部署，使您可以在Web和桌面平台上创建一致的PDF体验。

这些组件如何协同工作？

该集成创建了一个高效的工作流程，其中 IronPDF 负责繁重的 PDF 创建工作，而 Telerik 则提供流畅的查看体验。 以下是一个完整的示例，演示了如何从包含动态内容的 HTML 创建 PDF：

@page "/document-viewer"
@inject ChromePdfRenderer Renderer
<div class="row">
    <div class="col-md-12">
        <TelerikButton OnClick="@LoadDocument">
            Load PDF Document
        </TelerikButton>
        @if (documentData != null)
        {
            <TelerikPdfViewer Data="@documentData"
                            Height="800px">
            </TelerikPdfViewer>
        }
    </div>
</div>
@code {
    private byte[] documentData;
    private async Task LoadDocument()
    {
        // Generate dynamic PDF content
        var html = await GenerateReportHtml();
        var pdf = await Renderer.RenderHtmlAsPdfAsync(html);
        documentData = pdf.BinaryData;
    }
    private async Task<string> GenerateReportHtml()
    {
        // Build HTML dynamically
        return "<h1>Dynamic Report</h1><p>Report content here</p>";
    }
}

@page "/document-viewer"
@inject ChromePdfRenderer Renderer
<div class="row">
    <div class="col-md-12">
        <TelerikButton OnClick="@LoadDocument">
            Load PDF Document
        </TelerikButton>
        @if (documentData != null)
        {
            <TelerikPdfViewer Data="@documentData"
                            Height="800px">
            </TelerikPdfViewer>
        }
    </div>
</div>
@code {
    private byte[] documentData;
    private async Task LoadDocument()
    {
        // Generate dynamic PDF content
        var html = await GenerateReportHtml();
        var pdf = await Renderer.RenderHtmlAsPdfAsync(html);
        documentData = pdf.BinaryData;
    }
    private async Task<string> GenerateReportHtml()
    {
        // Build HTML dynamically
        return "<h1>Dynamic Report</h1><p>Report content here</p>";
    }
}

@page "/document-viewer"
@inject ChromePdfRenderer Renderer
<div class="row">
    <div class="col-md-12">
        <TelerikButton OnClick="@LoadDocument">
            Load PDF Document
        </TelerikButton>
        @If documentData IsNot Nothing Then
            <TelerikPdfViewer Data="@documentData"
                              Height="800px">
            </TelerikPdfViewer>
        End If
    </div>
</div>
@code
    Private documentData As Byte()
    
    Private Async Function LoadDocument() As Task
        ' Generate dynamic PDF content
        Dim html = Await GenerateReportHtml()
        Dim pdf = Await Renderer.RenderHtmlAsPdfAsync(html)
        documentData = pdf.BinaryData
    End Function

    Private Async Function GenerateReportHtml() As Task(Of String)
        ' Build HTML dynamically
        Return "<h1>Dynamic Report</h1><p>Report content here</p>"
    End Function
End Code

为什么选择这种混合方法？

虽然 Telerik UI for Blazor 提供了出色的查看功能，但它在 PDF 生成能力方面无法与 IronPDF 相媲美。 IronPDF 基于 Chrome 的引擎可以渲染复杂的布局、表单和样式化内容，而一些简单的文档处理库可能难以处理这些内容。 两者结合，即可获得专业的 PDF 生成功能和专业的查看界面。

这种方法为需要探索不同查看选项的开发人员提供了灵活性。 您可以用更简单的iframe显示替换Telerik查看器，或者在保留IronPDF生成能力的情况下开发自定义查看组件。 该解决方案能够很好地扩展，从简单的 HTML 到 PDF 转换到复杂的报表生成场景均可适用。 IronPDF 主页提供了所有支持用例的概述。

下一步实施步骤是什么？

使用 IronPDF 创建 Telerik Blazor PDF 查看器，可让您同时拥有两全其美的优势：高效的 PDF 生成和流畅的查看体验。 这种组合可以帮助您构建完整的 PDF 解决方案，从而实现传统 Web 项目的现代化，并满足现代应用程序的需求。 无论部署在 Windows、Linux 还是 macOS 上，这两个库都提供跨平台支持。

无论您是在构建文档管理系统、报告工具，还是任何需要 PDF 功能的 Blazor 应用程序，此集成都能提供您的项目所需的功能和用户体验。 从简单的发票生成到复杂的报表制作，该组合解决方案能够有效处理各种不同的需求。

准备好实施这个解决方案了吗？ 立即开始免费试用 IronPDF ，探索它如何改进您的 Telerik UI for Blazor 项目。 对于生产用途，请查看IronPDF 的许可选项，找到最适合您需求的方案。