Creating a Telerik Blazor PDF Viewer with IronPDF

為什麼要將 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 專案？

在 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 提供了出色的檢視功能，但它在 PDF 生成能力方面無法與 IronPDF 相提並論。 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 專案。 如需用於生產用途，請查看我們的授權選項，找到最適合您需求的方案。