How to Display PDFs in Blazor with IronPDF

Why Does a Blazor Application Need a Dedicated PDF Viewer?

Displaying PDFs in modern web applications requires a reliable viewer component that goes beyond basic browser capabilities. For .NET developers building Blazor applications, IronPDF provides an effective PDF viewer solution that integrates with your Blazor Server app. This enables high-performance PDF rendering and rich functionality without relying on third-party browser tools.

Native browser PDF support varies significantly across different browsers and platforms, leading to inconsistent user experiences. By implementing a custom PDF viewer in your Blazor application, you gain complete control over the viewing experience, ensuring consistent functionality across all platforms. This is particularly important for applications requiring compliance standards and advanced security features.

The Blazor framework -- built on Microsoft's ASP.NET Core -- allows component-based development that pairs naturally with PDF manipulation libraries. Rather than embedding a third-party viewer widget from an external CDN, you can build a component tailored to your application's exact requirements.

How Do You Install IronPDF in a Blazor Project?

Before implementing your Blazor PDF viewer, install IronPDF. Add it to your Blazor Server app through NuGet using either the Package Manager Console or the .NET CLI:

Install-Package IronPdf

Install-Package IronPdf

dotnet add package IronPdf

dotnet add package IronPdf

Next, create a new Blazor application and ensure you have the latest version of .NET installed. Store PDF files in the wwwroot folder for easy access, or load them from other sources like byte arrays or URLs. The installation overview provides detailed guidance for various deployment scenarios.

How Do You Create a Blazor PDF Viewer Component?

Build a basic Blazor PDF viewer component that can display PDF documents. Create a new Razor component in your project:

@page "/pdfviewer"
@rendermode InteractiveServer
@using IronPdf
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment

<h3>PDF Viewer Component</h3>
<div>
    <button @onclick="LoadPdfDocument">Open File</button>
    <div id="pdfContainer">
        @if (!string.IsNullOrEmpty(pdfUrl))
        {
            <iframe src="@pdfUrl" style="width:100%; height:600px;"></iframe>
        }
    </div>
</div>

@code {
    private string pdfUrl = "";
    private byte[] pdfData = Array.Empty<byte>();

    private async Task LoadPdfDocument()
    {
        var pdfDocument = PdfDocument.FromFile("wwwroot/sample.pdf");
        pdfData = pdfDocument.BinaryData;
        var base64 = Convert.ToBase64String(pdfData);
        pdfUrl = $"data:application/pdf;base64,{base64}";
    }
}

@page "/pdfviewer"
@rendermode InteractiveServer
@using IronPdf
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment

<h3>PDF Viewer Component</h3>
<div>
    <button @onclick="LoadPdfDocument">Open File</button>
    <div id="pdfContainer">
        @if (!string.IsNullOrEmpty(pdfUrl))
        {
            <iframe src="@pdfUrl" style="width:100%; height:600px;"></iframe>
        }
    </div>
</div>

@code {
    private string pdfUrl = "";
    private byte[] pdfData = Array.Empty<byte>();

    private async Task LoadPdfDocument()
    {
        var pdfDocument = PdfDocument.FromFile("wwwroot/sample.pdf");
        pdfData = pdfDocument.BinaryData;
        var base64 = Convert.ToBase64String(pdfData);
        pdfUrl = $"data:application/pdf;base64,{base64}";
    }
}

This code creates a PDF viewer component that loads a PDF document and displays it using an iframe. The LoadPdfDocument method reads a PDF from the wwwroot folder and converts it to a base64 data URL that the iframe renders directly. This approach works well with various PDF versions and supports UTF-8 encoding for international documents.

How Do You Use JavaScript Interop for Better PDF Display?

For better control over PDF content display, use JavaScript interop to handle the PDF viewer functionality. This pattern loads a JavaScript module asynchronously and delegates rendering to the browser's native blob/URL APIs -- a technique well-suited for Blazor's component lifecycle:

@page "/pdf-jsinterop"
@rendermode InteractiveServer
@using IronPdf
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment
@implements IAsyncDisposable

<h3>IronPDF JavaScript Interop Viewer</h3>
<p>Displays PDF using JavaScript Blob/ObjectURL capabilities.</p>

@if (!string.IsNullOrEmpty(ErrorMessage))
{
    <div class="alert alert-danger">Error: @ErrorMessage</div>
}

<div id="@documentId" style="border: 1px solid #ccc; width: 100%; min-height: 600px;">
    Loading PDF...
</div>

@code {
    private string documentId = Guid.NewGuid().ToString();
    private string ErrorMessage = string.Empty;
    private bool pdfLoaded = false;
    private IJSObjectReference? jsModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !pdfLoaded)
        {
            try
            {
                jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>(
                    "import", "./pdfViewerInterop.js");
                await LoadPdfWithJavaScript();
                pdfLoaded = true;
            }
            catch (Exception ex)
            {
                ErrorMessage = $"Failed to load JS module: {ex.Message}";
            }
            finally
            {
                StateHasChanged();
            }
        }
    }

    private async Task LoadPdfWithJavaScript()
    {
        if (jsModule is null) return;
        var pdfPath = Path.Combine(WebHostEnvironment.WebRootPath, "sample.pdf");
        if (!File.Exists(pdfPath))
        {
            ErrorMessage = $"File not found: {pdfPath}";
            return;
        }
        var pdf = PdfDocument.FromFile(pdfPath);
        await jsModule.InvokeVoidAsync("displayPdf", documentId, pdf.BinaryData);
    }

    public async ValueTask DisposeAsync()
    {
        if (jsModule is not null)
            await jsModule.DisposeAsync();
    }
}

@page "/pdf-jsinterop"
@rendermode InteractiveServer
@using IronPdf
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment
@implements IAsyncDisposable

<h3>IronPDF JavaScript Interop Viewer</h3>
<p>Displays PDF using JavaScript Blob/ObjectURL capabilities.</p>

@if (!string.IsNullOrEmpty(ErrorMessage))
{
    <div class="alert alert-danger">Error: @ErrorMessage</div>
}

<div id="@documentId" style="border: 1px solid #ccc; width: 100%; min-height: 600px;">
    Loading PDF...
</div>

@code {
    private string documentId = Guid.NewGuid().ToString();
    private string ErrorMessage = string.Empty;
    private bool pdfLoaded = false;
    private IJSObjectReference? jsModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !pdfLoaded)
        {
            try
            {
                jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>(
                    "import", "./pdfViewerInterop.js");
                await LoadPdfWithJavaScript();
                pdfLoaded = true;
            }
            catch (Exception ex)
            {
                ErrorMessage = $"Failed to load JS module: {ex.Message}";
            }
            finally
            {
                StateHasChanged();
            }
        }
    }

    private async Task LoadPdfWithJavaScript()
    {
        if (jsModule is null) return;
        var pdfPath = Path.Combine(WebHostEnvironment.WebRootPath, "sample.pdf");
        if (!File.Exists(pdfPath))
        {
            ErrorMessage = $"File not found: {pdfPath}";
            return;
        }
        var pdf = PdfDocument.FromFile(pdfPath);
        await jsModule.InvokeVoidAsync("displayPdf", documentId, pdf.BinaryData);
    }

    public async ValueTask DisposeAsync()
    {
        if (jsModule is not null)
            await jsModule.DisposeAsync();
    }
}

Add the corresponding JavaScript function to your wwwroot/pdfViewerInterop.js file. Note that this file uses JavaScript (not C#), saved as a .js module:

export function displayPdf(elementId, data) {
    const blob = new Blob([new Uint8Array(data)], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    const container = document.getElementById(elementId);
    if (!container) return;
    container.innerHTML = '';
    const iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.style.width = '100%';
    iframe.style.height = '600px';
    iframe.style.border = 'none';
    container.appendChild(iframe);
}

export function displayPdf(elementId, data) {
    const blob = new Blob([new Uint8Array(data)], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    const container = document.getElementById(elementId);
    if (!container) return;
    container.innerHTML = '';
    const iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.style.width = '100%';
    iframe.style.height = '600px';
    iframe.style.border = 'none';
    container.appendChild(iframe);
}

This JavaScript function creates a blob from the PDF data, generates an object URL, and appends an iframe to the container. The technique supports JavaScript rendering and custom render delays for complex documents.

How Do You Load PDFs from Multiple Sources?

Your Blazor PDF viewer can retrieve and display PDF documents from various sources. The example below shows loading from a URL and from HTML content:

private async Task LoadFromUrl(string url)
{
    using var client = new HttpClient();
    client.Timeout = TimeSpan.FromSeconds(30);
    var response = await client.GetAsync(url);
    response.EnsureSuccessStatusCode();
    var stream = await response.Content.ReadAsStreamAsync();
    var pdfDocument = new PdfDocument(stream);
    await DisplayPdfContent(pdfDocument);
}

private async Task LoadFromHtmlContent()
{
    var renderer = new ChromePdfRenderer();
    var htmlContent = "<h1>Generated PDF</h1><p>Dynamic content from Blazor.</p>";
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    await DisplayPdfContent(pdfDocument);
}

private Task DisplayPdfContent(PdfDocument document)
{
    var data = document.BinaryData;
    pdfUrl = $"data:application/pdf;base64,{Convert.ToBase64String(data)}";
    return Task.CompletedTask;
}

private async Task LoadFromUrl(string url)
{
    using var client = new HttpClient();
    client.Timeout = TimeSpan.FromSeconds(30);
    var response = await client.GetAsync(url);
    response.EnsureSuccessStatusCode();
    var stream = await response.Content.ReadAsStreamAsync();
    var pdfDocument = new PdfDocument(stream);
    await DisplayPdfContent(pdfDocument);
}

private async Task LoadFromHtmlContent()
{
    var renderer = new ChromePdfRenderer();
    var htmlContent = "<h1>Generated PDF</h1><p>Dynamic content from Blazor.</p>";
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    await DisplayPdfContent(pdfDocument);
}

private Task DisplayPdfContent(PdfDocument document)
{
    var data = document.BinaryData;
    pdfUrl = $"data:application/pdf;base64,{Convert.ToBase64String(data)}";
    return Task.CompletedTask;
}

The LoadFromUrl method retrieves PDF documents from remote locations, while LoadFromHtmlContent shows how to convert HTML to PDF on the fly. The Chrome rendering engine ensures accurate HTML conversion. Additional source options include Azure Blob Storage, database memory streams, and DOCX documents.

How Do You Add Interactive Features to a PDF Viewer?

Extend the PDF viewer with page navigation, rotation, print, and download functionality:

@code {
    private int currentPage = 1;
    private int totalPages;
    private byte[] pdfData = Array.Empty<byte>();
    private string pdfUrl = "";
    private string rotationClass = "";
    private string documentId = Guid.NewGuid().ToString();

    private async Task NavigateToPage(int page)
    {
        currentPage = page;
        await JSRuntime.InvokeVoidAsync("navigateTo", page);
    }

    private void RotateCounterclockwise()
    {
        rotationClass = "rotate-270";
    }

    private async Task PrintPdf()
    {
        await JSRuntime.InvokeVoidAsync("printDocument", documentId);
    }

    private async Task DownloadPdf()
    {
        await JSRuntime.InvokeVoidAsync("downloadFile", pdfData, "document.pdf");
    }
}

@code {
    private int currentPage = 1;
    private int totalPages;
    private byte[] pdfData = Array.Empty<byte>();
    private string pdfUrl = "";
    private string rotationClass = "";
    private string documentId = Guid.NewGuid().ToString();

    private async Task NavigateToPage(int page)
    {
        currentPage = page;
        await JSRuntime.InvokeVoidAsync("navigateTo", page);
    }

    private void RotateCounterclockwise()
    {
        rotationClass = "rotate-270";
    }

    private async Task PrintPdf()
    {
        await JSRuntime.InvokeVoidAsync("printDocument", documentId);
    }

    private async Task DownloadPdf()
    {
        await JSRuntime.InvokeVoidAsync("downloadFile", pdfData, "document.pdf");
    }
}

This code adds page navigation, rotation, print, and download functionality. Consider adding page numbers and bookmarks for navigation-heavy documents. Advanced features might include text extraction and PDF to HTML conversion.

How Do You Handle PDF Forms and Annotations?

For PDF documents with form fields and annotations, IronPDF provides solid support for reading and writing field values programmatically:

private async Task ProcessFormFields()
{
    var pdfDocument = PdfDocument.FromFile("form.pdf");

    foreach (var field in pdfDocument.Form.Fields)
    {
        if (field.Type == PdfFormFieldType.Text)
        {
            field.Value = "User Input";
        }
    }

    await DisplayPdfContent(pdfDocument);
}

private async Task SaveFormData()
{
    var pdfWithFormData = PdfDocument.FromFile("filled-form.pdf");
    var formData = pdfWithFormData.Form.Fields
        .ToDictionary(f => f.Name, f => f.Value);

    var json = System.Text.Json.JsonSerializer.Serialize(formData);
    await File.WriteAllTextAsync("form-data.json", json);

    pdfWithFormData.Form.Flatten();
    pdfWithFormData.SaveAs("form-submission.pdf");
}

private async Task ProcessFormFields()
{
    var pdfDocument = PdfDocument.FromFile("form.pdf");

    foreach (var field in pdfDocument.Form.Fields)
    {
        if (field.Type == PdfFormFieldType.Text)
        {
            field.Value = "User Input";
        }
    }

    await DisplayPdfContent(pdfDocument);
}

private async Task SaveFormData()
{
    var pdfWithFormData = PdfDocument.FromFile("filled-form.pdf");
    var formData = pdfWithFormData.Form.Fields
        .ToDictionary(f => f.Name, f => f.Value);

    var json = System.Text.Json.JsonSerializer.Serialize(formData);
    await File.WriteAllTextAsync("form-data.json", json);

    pdfWithFormData.Form.Flatten();
    pdfWithFormData.SaveAs("form-submission.pdf");
}

This enables form filling capabilities within the Blazor PDF viewer, allowing users to interact with form fields directly in the browser. The code iterates through form fields and sets values programmatically, which is ideal for applications requiring dynamic pre-filling. IronPDF also supports digital signatures and text annotations.

Supported field types include text inputs, checkboxes, radio buttons, dropdown lists, digital signature fields, multi-line text areas, and date pickers.

How Do You Optimize Performance for Large PDFs?

To ensure good performance when displaying PDFs, especially for large files, use chunked loading and memory management:

private async Task LoadLargePdf()
{
    const int chunkSize = 1024 * 1024; // 1MB chunks
    var pdfPath = "largefile.pdf";

    using var fileStream = File.OpenRead(pdfPath);
    var buffer = new byte[chunkSize];
    var chunks = new List<byte[]>();
    int bytesRead;

    while ((bytesRead = await fileStream.ReadAsync(buffer)) > 0)
    {
        var chunk = new byte[bytesRead];
        Array.Copy(buffer, chunk, bytesRead);
        chunks.Add(chunk);
    }

    await ProcessPdfChunks(chunks);
}

private async Task LoadLargePdf()
{
    const int chunkSize = 1024 * 1024; // 1MB chunks
    var pdfPath = "largefile.pdf";

    using var fileStream = File.OpenRead(pdfPath);
    var buffer = new byte[chunkSize];
    var chunks = new List<byte[]>();
    int bytesRead;

    while ((bytesRead = await fileStream.ReadAsync(buffer)) > 0)
    {
        var chunk = new byte[bytesRead];
        Array.Copy(buffer, chunk, bytesRead);
        chunks.Add(chunk);
    }

    await ProcessPdfChunks(chunks);
}

This approach loads large PDF files in chunks, preventing memory issues and ensuring smooth performance even with substantial documents. It is particularly useful when dealing with PDF files on mobile devices or systems with limited resources. See IronPDF's performance guide for additional tuning options.

Additional optimization strategies include linearization for fast web viewing, compression to reduce file sizes, and async processing for handling multiple PDFs concurrently. According to PDF Association best practices, linearized (web-optimized) PDFs can reduce initial load time by 30--60% for large documents.

How Do You Secure a Blazor PDF Viewer for Password-Protected Files?

When working with password-protected PDF files, pass the password directly to PdfDocument.FromFile and configure appropriate HTTP security headers:

private async Task LoadSecurePdf(string password)
{
    var pdfDocument = PdfDocument.FromFile("secure.pdf", password);

    var headers = new Dictionary<string, string>
    {
        { "X-Frame-Options", "SAMEORIGIN" },
        { "Content-Security-Policy", "default-src 'self'" },
        { "X-Content-Type-Options", "nosniff" },
        { "Referrer-Policy", "no-referrer" }
    };

    await DisplayPdfContent(pdfDocument);
}

private async Task LoadSecurePdf(string password)
{
    var pdfDocument = PdfDocument.FromFile("secure.pdf", password);

    var headers = new Dictionary<string, string>
    {
        { "X-Frame-Options", "SAMEORIGIN" },
        { "Content-Security-Policy", "default-src 'self'" },
        { "X-Content-Type-Options", "nosniff" },
        { "Referrer-Policy", "no-referrer" }
    };

    await DisplayPdfContent(pdfDocument);
}

This code demonstrates loading password-protected PDF documents while maintaining security through proper header configuration. Consider digital signatures for improved authentication. Implement PDF sanitization to remove potentially malicious content and redact sensitive information.

When handling passwords, never store them in plain text or client-side code. Use secure input methods with proper validation, implement session timeouts for sensitive documents, and clear passwords from memory after use. Microsoft's ASP.NET Core security guidance recommends always validating and sanitizing any user-supplied credential before passing it to downstream APIs.

What Are the Key Takeaways for Displaying PDFs in Blazor?

Implementing a Blazor PDF viewer with IronPDF provides developers with a complete solution for displaying PDFs in web applications. From basic display to advanced features like form filling and annotations, IronPDF's PDF viewer component offers the functionality needed for professional applications.

The examples shown demonstrate how to create a reliable Blazor PDF viewer that handles various PDF sources, provides interactive features, and maintains good performance. Whether building a simple document viewer or a complex document management system, IronPDF's integration with Blazor Server apps makes it straightforward to implement professional PDF viewing capabilities.

Key benefits include:

• Cross-platform compatibility with consistent rendering across all browsers
• Advanced security features for sensitive documents
• Performance optimization for large files via async and chunked loading
• Complete form handling capabilities including digital signatures
• Smooth integration with existing .NET applications

IronPDF supports Azure, AWS, Docker, and traditional Windows environments. Ready to build your own viewer? Start with a free trial of IronPDF and consult the complete documentation and code examples to create effective PDF viewing experiences in your Blazor applications.