使用 IronPDF 建立 Telerik Blazor PDF 檢視器

為什麼要將 Telerik UI 與 IronPDF 結合使用？

Telerik Blazor PDF 檢視器在顯示 PDF 檔案方面表現出色，具有文字搜尋、縮放控制和可自訂工具列等功能。 但是，當您需要從 HTML、URL 或 Razor 視圖動態產生 PDF 檔案時，IronPDF 提供了基於 Chrome 的渲染引擎，而 Telerik UI 的文件處理庫中並未包含該引擎。

這種混合方法讓您可以充分利用 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 提供了出色的檢視功能，但它在 PDF 生成能力方面無法與 IronPDF 相提並論。 IronPDF 以 Chrome 為基礎的引擎可以渲染複雜的佈局、表單和樣式化內容，而一些簡單的文件處理庫可能難以處理這些內容。 兩者結合，即可獲得企業級 PDF 產生功能和專業的檢視介面。

這種方法也為需要探索不同檢視選項的開發人員提供了靈活性。 您可以用更簡單的 iframe 顯示替換 Telerik 檢視器，或開發自訂檢視組件，同時保留 IronPDF 的生成功能。

結論

使用 IronPDF 建立 Telerik Blazor PDF 檢視器，可讓您同時擁有強大的 PDF 產生功能和流暢的檢視體驗。 這種組合有助於開發人員建立全面的 PDF 解決方案，從而實現傳統 Web 專案的現代化並滿足現代應用程式的需求。

無論您是在建立文件管理系統、報告工具，還是任何需要 PDF 功能的 Blazor 應用程序，此整合都能提供您的專案所需的功能和使用者體驗。

準備好實施這個方案了嗎？ 立即開始免費試用 IronPDF ，探索它如何增強您的 Telerik UI for Blazor 專案。 如需用於生產用途，請查看我們的授權選項，找到最適合您需求的方案。