使用 IronPDF 创建 Telerik Blazor PDF 查看器

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

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

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

如何同时使用这两个库来搭建一个 Blazor 项目？

在您的Blazor项目中设置这两个库是很简单的。 首先，通过 NuGet 安装必要的软件包。 您可以按照详细的安装指南进行操作，也可以使用NuGet 包管理器：

Install-Package IronPDF Telerik.UI.for.Blazor

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

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

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

此配置在您的应用程序中启用Telerik UI for Blazor组件和IronPDF的渲染功能。 已经熟悉 Telerik 的DevCraft套件用户会发现这种集成非常流畅。 结果是一个完全配置好的系统。 对于更复杂的场景，您可能需要探索异步 PDF 生成或自定义日志记录配置。

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

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

@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;
    }
}

这段代码生成了一个已准备好显示的PDF文档。 IronPDF的渲染引擎确保您的HTML、CSS甚至JavaScript内容完美渲染，维护用户通过PDF查看组件查看时的所有格式。 您还可以向 PDF 添加图像、嵌入 Azure Blob 存储中的图像，或直接将图像转换为 PDF 。

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

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

使用 IronPDF 生成 PDF 后，使用 Telerik Blazor PDF 查看器显示它非常简单。 您还可以探索在 MAUI 应用程序中查看 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体验。 此功能是查看器的原生功能。 您还可以将 PDF 导出为不同的格式，或者将 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 your 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 your HTML dynamically
        return "<h1>Dynamic Report</h1><p>Report content here</p>";
    }
}

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

虽然Telerik UI for Blazor提供了出色的查看功能，但它无法与IronPDF的PDF生成能力相比。 IronPDF的基于Chrome的引擎可以渲染复杂的布局、表单和样式化的内容，许多简单的文档处理库可能难以处理。 两者结合，即可获得专业的 PDF 生成功能和专业的查看界面。 这种方法还支持高级功能，例如PDF/A 合规性、 PDF/UA 可访问性和元数据管理。

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

下一步实施步骤是什么？

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

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

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