How to Display a PDF in Blazor

@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;
    private async Task LoadPdfDocument()
    {
        // Load PDF from file
        var pdfDocument = PdfDocument.FromFile("wwwroot/sample.pdf");
        pdfData = pdfDocument.BinaryData;
        // Create object URL for display
        pdfUrl = await CreateObjectUrl(pdfData);
    }
    private async Task<string> CreateObjectUrl(byte[] data)
    {
        var base64 = Convert.ToBase64String(data);
        return $"data:application/pdf;base64,{base64}";
    }
}

Imports IronPdf
Imports Microsoft.AspNetCore.Hosting
Imports Microsoft.AspNetCore.Components
Imports Microsoft.JSInterop

@page "/pdfviewer"
@rendermode InteractiveServer

@inject IJSRuntime JSRuntime
@inject IWebHostEnvironment WebHostEnvironment

<h3>PDF Viewer Component</h3>
<div>
    <button @onclick="LoadPdfDocument">Open File</button>
    <div id="pdfContainer">
        @If Not String.IsNullOrEmpty(pdfUrl) Then
            <iframe src="@pdfUrl" style="width:100%; height:600px;"></iframe>
        End If
    </div>
</div>

@code
    Private pdfUrl As String = ""
    Private pdfData As Byte()

    Private Async Function LoadPdfDocument() As Task
        ' Load PDF from file
        Dim pdfDocument = PdfDocument.FromFile("wwwroot/sample.pdf")
        pdfData = pdfDocument.BinaryData
        ' Create object URL for display
        pdfUrl = Await CreateObjectUrl(pdfData)
    End Function

    Private Async Function CreateObjectUrl(data As Byte()) As Task(Of String)
        Dim base64 = Convert.ToBase64String(data)
        Return $"data:application/pdf;base64,{base64}"
    End Function
End Code

@page "/pdf-jsinterop"
@rendermode InteractiveServer
@using IronPdf
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment
<h3>IronPDF JavaScript Interop Viewer</h3>
<p>Displays PDF using JavaScript's 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;
    // Hold the reference to the loaded JavaScript module
    private IJSObjectReference? jsModule;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !pdfLoaded)
        {
            try
            {
                // 1. Asynchronously load the JavaScript file as a module
                // This guarantees the script is loaded before the next line executes.
                jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import",
                    "./pdfViewerInterop.js");
                await LoadPdfWithJavaScript();
                pdfLoaded = true;
            }
            catch (Exception ex)
            {
                ErrorMessage = $"Failed to load JS module or execute: {ex.Message}";
            }
            finally
            {
                StateHasChanged();
            }
        }
    }
    private async Task LoadPdfWithJavaScript()
    {
        if (jsModule is null) return; // Should never happen if the module loads successfully
        try
        {
            var pdfPath = Path.Combine(WebHostEnvironment.WebRootPath, "sample.pdf");
            if (!File.Exists(pdfPath))
            {
                ErrorMessage = $"File not found: {pdfPath}";
                return;
            }
            var pdf = PdfDocument.FromFile(pdfPath);
            var stream = new MemoryStream(pdf.BinaryData);
            // 2. Invoke the function using the module reference
            // Note: We only pass the function name here.
            await jsModule.InvokeVoidAsync("displayPdf",
                documentId, stream.ToArray());
        }
        catch (Exception ex)
        {
            ErrorMessage = $"Failed to load PDF or invoke JS: {ex.Message}";
        }
    }
    // IMPORTANT: Dispose of the module when the component is removed
    public async ValueTask DisposeAsync()
    {
        if (jsModule is not null)
        {
            await jsModule.DisposeAsync();
        }
    }
}

Imports System
Imports System.IO
Imports System.Threading.Tasks
Imports IronPdf
Imports Microsoft.AspNetCore.Components
Imports Microsoft.AspNetCore.Components.Web
Imports Microsoft.JSInterop
Imports Microsoft.AspNetCore.Hosting

@page "/pdf-jsinterop"
@rendermode InteractiveServer

@inject IJSRuntime JSRuntime
@inject IWebHostEnvironment WebHostEnvironment

<h3>IronPDF JavaScript Interop Viewer</h3>
<p>Displays PDF using JavaScript's Blob/ObjectURL capabilities.</p>
@if Not String.IsNullOrEmpty(ErrorMessage) Then
    <div class="alert alert-danger">Error: @ErrorMessage</div>
End If
<div id="@documentId" style="border: 1px solid #ccc; width: 100%; min-height: 600px;">
    Loading PDF...
</div>

@code
    Private documentId As String = Guid.NewGuid().ToString()
    Private ErrorMessage As String = String.Empty
    Private pdfLoaded As Boolean = False
    ' Hold the reference to the loaded JavaScript module
    Private jsModule As IJSObjectReference

    Protected Overrides Async Function OnAfterRenderAsync(firstRender As Boolean) As Task
        If firstRender AndAlso Not pdfLoaded Then
            Try
                ' 1. Asynchronously load the JavaScript file as a module
                ' This guarantees the script is loaded before the next line executes.
                jsModule = Await JSRuntime.InvokeAsync(Of IJSObjectReference)("import", "./pdfViewerInterop.js")
                Await LoadPdfWithJavaScript()
                pdfLoaded = True
            Catch ex As Exception
                ErrorMessage = $"Failed to load JS module or execute: {ex.Message}"
            Finally
                StateHasChanged()
            End Try
        End If
    End Function

    Private Async Function LoadPdfWithJavaScript() As Task
        If jsModule Is Nothing Then Return ' Should never happen if the module loads successfully
        Try
            Dim pdfPath = Path.Combine(WebHostEnvironment.WebRootPath, "sample.pdf")
            If Not File.Exists(pdfPath) Then
                ErrorMessage = $"File not found: {pdfPath}"
                Return
            End If
            Dim pdf = PdfDocument.FromFile(pdfPath)
            Dim stream = New MemoryStream(pdf.BinaryData)
            ' 2. Invoke the function using the module reference
            ' Note: We only pass the function name here.
            Await jsModule.InvokeVoidAsync("displayPdf", documentId, stream.ToArray())
        Catch ex As Exception
            ErrorMessage = $"Failed to load PDF or invoke JS: {ex.Message}"
        End Try
    End Function

    ' IMPORTANT: Dispose of the module when the component is removed
    Public Async Function DisposeAsync() As ValueTask Implements IAsyncDisposable.DisposeAsync
        If jsModule IsNot Nothing Then
            Await jsModule.DisposeAsync()
        End If
    End Function
End Code

export function displayPdf(elementId, data) {
    // 1. Create a Blob from the byte array data
    const blob = new Blob([new Uint8Array(data)],
        { type: 'application/pdf' });
    // 2. Create a temporary URL for the Blob
    const url = URL.createObjectURL(blob);
    // 3. Find the container element
    const container = document.getElementById(elementId);
    if (!container) return;
    // 4. Clear any previous content
    container.innerHTML = '';
    // 5. Create and configure the iframe
    const iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.style.width = '100%';
    iframe.style.height = '600px';
    iframe.style.border = 'none';
    // 6. Append the iframe to the container
    container.appendChild(iframe);
}

The provided code is JavaScript, not C#. Therefore, it cannot be directly converted to VB.NET. However, if you have a C# code snippet that you would like to convert to VB.NET, please provide it, and I will assist you with the conversion.

private async Task LoadFromUrl()
{
    var client = new HttpClient();
    var response = await client.GetAsync("___PROTECTED_URL_116___");
    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>";
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    await DisplayPdfContent(pdfDocument);
}
private async Task DisplayPdfContent(PdfDocument document)
{
    var data = document.BinaryData;
    pdfUrl = $"data:application/pdf;base64,{Convert.ToBase64String(data)}";
}

Private Async Function LoadFromUrl() As Task
    Dim client = New HttpClient()
    Dim response = Await client.GetAsync("___PROTECTED_URL_116___")
    Dim stream = Await response.Content.ReadAsStreamAsync()
    Dim pdfDocument = New PdfDocument(stream)
    Await DisplayPdfContent(pdfDocument)
End Function

Private Async Function LoadFromHtmlContent() As Task
    Dim renderer = New ChromePdfRenderer()
    Dim htmlContent = "<h1>Generated PDF</h1>"
    Dim pdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
    Await DisplayPdfContent(pdfDocument)
End Function

Private Async Function DisplayPdfContent(document As PdfDocument) As Task
    Dim data = document.BinaryData
    pdfUrl = $"data:application/pdf;base64,{Convert.ToBase64String(data)}"
End Function

@code {
    private int currentPage = 1;
    private int totalPages;
    private string rotationClass = "";
    private async Task NavigateToPage(int page)
    {
        currentPage = page;
        await JSRuntime.InvokeVoidAsync("navigateTo", page);
    }
    private void RotateCounterclockwise()
    {
        // Counterclockwise switch orientation
        rotationClass = "rotate-270";
    }
    private async Task PrintPdf()
    {
        await JSRuntime.InvokeVoidAsync("printDocument", documentId);
    }
    private async Task DownloadPdf()
    {
        var fileName = "document.pdf";
        await JSRuntime.InvokeVoidAsync("downloadFile", 
           pdfData, fileName);
    }
}

Imports System.Threading.Tasks

Private currentPage As Integer = 1
Private totalPages As Integer
Private rotationClass As String = ""

Private Async Function NavigateToPage(page As Integer) As Task
    currentPage = page
    Await JSRuntime.InvokeVoidAsync("navigateTo", page)
End Function

Private Sub RotateCounterclockwise()
    ' Counterclockwise switch orientation
    rotationClass = "rotate-270"
End Sub

Private Async Function PrintPdf() As Task
    Await JSRuntime.InvokeVoidAsync("printDocument", documentId)
End Function

Private Async Function DownloadPdf() As Task
    Dim fileName As String = "document.pdf"
    Await JSRuntime.InvokeVoidAsync("downloadFile", pdfData, fileName)
End Function

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";
        }
    }
    // Enable form filling in viewer
    var modifiedPdf = pdfDocument.BinaryData;
    await DisplayPdfContent(pdfDocument);
}

Option Strict On



Private Async Function ProcessFormFields() As Task
    Dim pdfDocument = PdfDocument.FromFile("form.pdf")
    For Each field In pdfDocument.Form.Fields
        If field.Type = PdfFormFieldType.Text Then
            field.Value = "User Input"
        End If
    Next
    ' Enable form filling in viewer
    Dim modifiedPdf = pdfDocument.BinaryData
    Await DisplayPdfContent(pdfDocument)
End Function

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);
        }
        // Process chunks for display
        await ProcessPdfChunks(chunks);
    }
}

Private Async Function LoadLargePdf() As Task
    Const chunkSize As Integer = 1024 * 1024 ' 1MB chunks
    Dim pdfPath As String = "largefile.pdf"
    Using fileStream = File.OpenRead(pdfPath)
        Dim buffer(chunkSize - 1) As Byte
        Dim chunks As New List(Of Byte())()
        Dim bytesRead As Integer
        Do
            bytesRead = Await fileStream.ReadAsync(buffer, 0, buffer.Length)
            If bytesRead > 0 Then
                Dim chunk(bytesRead - 1) As Byte
                Array.Copy(buffer, chunk, bytesRead)
                chunks.Add(chunk)
            End If
        Loop While bytesRead > 0
        ' Process chunks for display
        Await ProcessPdfChunks(chunks)
    End Using
End Function

private async Task LoadSecurePdf(string password)
{
    var pdfDocument = PdfDocument.FromFile("secure.pdf", password);
    if (pdfDocument != null)
    {
       var headers = new Dictionary<string, string>
        {
            {"X-Frame-Options", "SAMEORIGIN"},
            {"Content-Security-Policy", "default-src 'self'"}
        };
        await DisplayPdfContent(pdfDocument);
    }
}

Private Async Function LoadSecurePdf(password As String) As Task
    Dim pdfDocument = PdfDocument.FromFile("secure.pdf", password)
    If pdfDocument IsNot Nothing Then
        Dim headers = New Dictionary(Of String, String) From {
            {"X-Frame-Options", "SAMEORIGIN"},
            {"Content-Security-Policy", "default-src 'self'"}
        }
        Await DisplayPdfContent(pdfDocument)
    End If
End Function