使用 IronPDF 创建 Telerik Blazor PDF 查看器

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

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

这种混合方法让您可以利用IronPDF的卓越PDF创建能力，同时使用Telerik光滑的UI组件进行显示。 当您需要现代化旧有的Web项目或创建需要同时具备生成和查看功能的新Blazor PDF文件解决方案时，这尤其有用。 此外，它的简单性使其成为一个简单的选择。

如何使用两个库设置Blazor项目？

在您的Blazor项目中设置这两个库是很简单的。 首先，通过NuGet安装必要的包：

Install-Package IronPDF Telerik.UI.for.Blazor

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

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

此配置在您的应用程序中启用Telerik UI for Blazor组件和IronPDF的渲染功能。 已经熟悉Telerik的DevCraft套件用户将发现这种集成无缝衔接。 结果是一个完全配置好的系统。

如何使用IronPDF创建PDF文档以供显示？

IronPDF将HTML内容转换为Telerik PDF查看器可显示的PDF文件。 以下是如何从HTML生成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;
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

这段代码生成了一个已准备好显示的PDF文档。 IronPDF的渲染引擎确保您的HTML、CSS甚至JavaScript内容完美渲染，维护用户通过PDF查看组件查看时的所有格式。

ChromePdfRenderer类提供了广泛的自定义选项。 您可以设置页面大小、边距、页眉、页脚，甚至为打印媒体定义自定义CSS - 这些功能完美补充了Telerik的查看功能。 这也是您如何提交数据到渲染器的方法。

如何集成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>

IRON VB CONVERTER ERROR developers@ironsoftware.com

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

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

这些组件如何协同工作？

集成创建了一个强大的工作流程，其中IronPDF负责处理PDF创建的繁重工作，而Telerik则提供了出色的查看体验。 这是一个完整的示例：

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

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

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

这种方法也为需要探索不同查看选项的开发人员提供了灵活性。 您可以用更简单的iframe显示替换Telerik查看器，或者在保留IronPDF生成能力的情况下开发自定义查看组件。

结论

使用IronPDF创建Telerik Blazor PDF查看器让您能够享受两者的好处：强大的PDF生成和光滑的查看体验。 这种组合帮助开发人员构建全面的PDF解决方案，可以现代化旧有的Web项目并满足现代应用程序所需。

无论您是在构建文档管理系统、报告工具还是任何需要PDF功能的Blazor应用程序，这种集成都能提供项目所需的功能和用户体验。

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