使用Telerik Blazor PDF Viewer功能增強您的應用程式

為什麼要將 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 的渲染功能。 DevCraft 已經熟悉 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 的授權選項，找到最適合您需求的方案。