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. IronPDF's Chrome rendering engine ensures pixel-perfect accuracy when converting web content to PDF.

This hybrid approach lets you use 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 solutions that require both generation and viewing features. The simplicity makes it an easy choice. You can also add headers and footers, apply watermarks, and set custom margins to your generated PDFs before displaying them.

How Can You 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. You can follow the detailed installation guide or use the NuGet package manager:

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>();

This configuration enables both the Telerik UI for Blazor components and IronPDF's rendering capabilities in your application. DevCraft suite users already familiar with Telerik will find this integration smooth. The result is a fully configured system. For more complex scenarios, you might want to explore async PDF generation or custom logging configurations.

How Do You 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. You can also convert HTML strings to PDF, render HTML files, or even convert Markdown to 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;
    }
}

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. You can also add images to PDFs, embed images from Azure Blob Storage, or convert images to PDF directly.

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. For advanced scenarios, explore page breaks control, viewport configuration, or Base URL settings for proper asset loading.

How Can You 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. You can also explore PDF viewing in MAUI applications for cross-platform scenarios:

<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>

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 Data attribute provides the PDF value to display. For improved functionality, you might want to implement text extraction, PDF searching capabilities, or annotation features.

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. You can also export PDFs to different formats or rasterize PDFs to images for additional flexibility.

How Do These Components Work Together?

The integration creates an effective workflow where IronPDF handles the heavy lifting of PDF creation while Telerik provides the polished viewing experience. Here's a complete example that demonstrates creating PDFs from HTML with dynamic content:

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

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 professional PDF generation with a professional viewing interface. This approach also supports advanced features like PDF/A compliance, PDF/UA accessibility, and metadata management.

This approach 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. The solution scales well from simple HTML to PDF conversions to complex report generation scenarios.

What Are the Next Steps for Implementation?

Creating a Telerik Blazor PDF viewer with IronPDF gives you the best of both worlds: effective PDF generation and polished viewing experiences. This combination helps you build complete PDF solutions that can modernize legacy web projects and meet modern application requirements. Whether you're working with Windows, Linux, or macOS deployments, both libraries provide cross-platform support.

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. From simple invoice generation to complex XML to PDF transformations, the combined solution handles diverse requirements effectively.

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