Creating a Telerik Blazor PDF Viewer with IronPDF

Why Combine Telerik UI with IronPDF?

The Telerik Blazor PDF viewer excels at displaying PDFs with features like text search, zoom controls, and a customizable toolbar. However, when you need to generate PDF files dynamically from HTML, URLs, or Razor views, IronPDF provides the Chrome-based rendering engine that Telerik UI doesn't include in its document processing libraries.

This hybrid approach lets you leverage IronPDF's superior PDF creation capabilities while using Telerik's polished UI components for display. It's particularly useful when you need to modernize legacy web projects or create new Blazor PDF file solutions that require both generation and viewing features. Additionally, the simplicity makes it an easy choice.

How Can I Set Up a Blazor Project with Both Libraries?

Setting up both libraries in your Blazor project is straightforward. First, install the necessary packages via NuGet:

Install-Package IronPDF Telerik.UI.for.Blazor

After installation, configure your Program.cs to add services:

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

This configuration enables both the Telerik UI for Blazor components and IronPDF's rendering capabilities in your application. The DevCraft suite users already familiar with Telerik will find this integration seamless. The result is a fully configured system.

How Do I Create PDF Documents with IronPDF for Display?

IronPDF transforms HTML content into PDF files that the Telerik PDF viewer can display. Here's how to generate a PDF from HTML and prepare it for viewing:

@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

This code generates a PDF document that's ready for display. IronPDF's rendering engine ensures your HTML, CSS, and even JavaScript content renders perfectly, maintaining all formatting when users view it through the PDF viewer component.

The ChromePdfRenderer class offers extensive customization options. You can set page size, margins, headers, footers, and even define custom CSS for print media - features that complement Telerik's viewing capabilities perfectly. This is also how you can submit data to the renderer.

How Can I Integrate Telerik's PDF Viewer Blazor Component?

Once you've generated your PDF with IronPDF, displaying it with the Telerik Blazor PDF viewer is simple:

<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

This component configuration provides essential tools for interacting with PDFs. The toolbar includes navigation buttons, zoom level controls, and search functionality. You can customize which tools appear based on your application needs. The reference to the data is through the Data attribute, providing the PDF value.

The Telerik UI for Blazor viewer handles browser compatibility automatically, working across modern browsers without plugins. For desktop applications using .NET MAUI, both libraries support cross-platform deployment, letting you create consistent PDF experiences across web and desktop platforms. This functionality is native to the viewer.

How Do These Components Work Together?

The integration creates a powerful workflow where IronPDF handles the heavy lifting of PDF creation while Telerik provides the polished viewing experience. Here's a complete example:

@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

Why Choose This Hybrid Approach?

While Telerik UI for Blazor offers excellent viewing capabilities, it doesn't match IronPDF's PDF generation power. IronPDF's Chrome-based engine renders complex layouts, forms, and styled content that simpler document processing libraries might struggle with. By combining both, you get enterprise-grade PDF generation with a professional viewing interface.

This approach also provides flexibility for developers who need to explore different viewing options. You could replace the Telerik viewer with a simpler iframe display or develop custom viewing components while keeping IronPDF's generation capabilities.

Conclusion

Creating a Telerik Blazor PDF viewer with IronPDF gives you the best of both worlds: powerful PDF generation and polished viewing experiences. This combination helps developers build comprehensive PDF solutions that can modernize legacy web projects and meet modern application requirements.

Whether you're building document management systems, reporting tools, or any Blazor application needing PDF capabilities, this integration provides the functionality and user experience your projects demand.

Ready to implement this solution? Start your free IronPDF trial to explore how it enhances your Telerik UI for Blazor projects. For production use, check out our licensing options to find the right fit for your needs.