Cómo mostrar un PDF en Blazor

¿Por qué necesito un componente visor de PDF en Blazor?

Para visualizar archivos PDF en aplicaciones web modernas se necesita un componente de visualización confiable que vaya más allá de las capacidades básicas del navegador. Para los desarrolladores .NET que crean aplicaciones Blazor, IronPDF ofrece una solución de visualización de PDF eficaz que se integra perfectamente con su aplicación Blazor Server . Esto le permite mostrar documentos PDF con alto rendimiento y gran funcionalidad sin depender de herramientas de navegador de terceros.

En este tutorial, exploraremos cómo implementar un visor de PDF de Blazor usando IronPDF, creando un componente visor de PDF que puede abrir archivos PDF, manejar contenido PDF y brindar a los usuarios una interfaz intuitiva para mostrar PDF tanto en computadoras de escritorio como en dispositivos móviles . El motor de renderizado de Chrome garantiza una visualización consistente en todas las plataformas.

La necesidad de un componente visor de PDF dedicado se hace evidente cuando se consideran las limitaciones del navegador. La compatibilidad nativa de PDF con los navegadores varía significativamente entre los distintos navegadores y plataformas, lo que genera experiencias de usuario inconsistentes. Al implementar un visor de PDF personalizado en su aplicación Blazor , obtiene control total sobre la experiencia de visualización, lo que garantiza una funcionalidad consistente en todas las plataformas. Esto es particularmente importante para las aplicaciones que requieren estándares de cumplimiento y características de seguridad .

¿Cómo puedo empezar a visualizar archivos PDF con IronPDF?

Antes de implementar tu visor de PDF en Blazor, necesitarás instalar IronPDF. Agréguelo a su aplicación Blazor Server a través de NuGet :

Install-Package IronPdf

A continuación, crea una nueva aplicación Blazor y asegúrate de tener instalada la última versión de .NET Core. Guarde sus archivos PDF en la carpeta wwwroot para acceder fácilmente a ellos o prepárese para cargarlos desde otras fuentes, como matrices de bytes o URL. La descripción general de la instalación proporciona orientación detallada para varios escenarios de implementación.

¿Cómo creo mi primer componente Visor de PDF Blazor?

Vamos a construir un componente básico de visor de PDF en Blazor que pueda mostrar documentos PDF. Primero, crea un nuevo componente Razor:

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

@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

Este código crea un componente visor de PDF simple que carga un documento PDF y lo muestra usando un iframe. El método LoadPdfDocument lee archivos PDF de la carpeta wwwroot y los convierte en una matriz de bytes. Luego, el método CreateObjectUrl transforma esta matriz de bytes en una URL de datos que el iframe puede mostrar, permitiendo a los usuarios ver el documento PDF cargado. Este enfoque funciona bien con varias versiones de PDF y admite la codificación UTF-8 .

¿Cómo implemento la interoperabilidad de JavaScript para mejorar la visualización?

Para un mejor control sobre la visualización del contenido PDF, podemos utilizar funciones de JavaScript para manejar la funcionalidad del visor de PDF:

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

@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

Agrega esta función de JavaScript a tu archivo JavaScript en la carpeta wwwroot:

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

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.

Esta función de JavaScript crea un blob a partir de los datos del PDF y genera una URL de objeto. Luego crea un elemento iframe dinámicamente y lo añade al contenedor. Este enfoque le brinda más control sobre cómo se muestran las páginas PDF y permite un mejor manejo del ciclo de vida del componente visor de PDF. La técnica admite la representación de JavaScript y retrasos de representación personalizados para documentos complejos.

try {
    // Check if the browser supports required features
    if (!window.Blob || !window.URL) {
        throw new Error("Browser doesn't support required PDF viewing features");
    }
    // Validate PDF data before processing
    if (!data || data.length === 0) {
        throw new Error("Invalid PDF data received");
    }
    // Monitor memory usage for large files
    if (data.length > 50 * 1024 * 1024) { // 50MB threshold
        console.warn("Large PDF detected, performance may be affected");
    }
} catch (error) {
    console.error("PDF viewing error:", error);
    // Fallback to server-side rendering
}

try {
    // Check if the browser supports required features
    if (!window.Blob || !window.URL) {
        throw new Error("Browser doesn't support required PDF viewing features");
    }
    // Validate PDF data before processing
    if (!data || data.length === 0) {
        throw new Error("Invalid PDF data received");
    }
    // Monitor memory usage for large files
    if (data.length > 50 * 1024 * 1024) { // 50MB threshold
        console.warn("Large PDF detected, performance may be affected");
    }
} catch (error) {
    console.error("PDF viewing error:", error);
    // Fallback to server-side rendering
}

Try
    ' Check if the browser supports required features
    If Not window.Blob OrElse Not window.URL Then
        Throw New Exception("Browser doesn't support required PDF viewing features")
    End If
    ' Validate PDF data before processing
    If data Is Nothing OrElse data.length = 0 Then
        Throw New Exception("Invalid PDF data received")
    End If
    ' Monitor memory usage for large files
    If data.length > 50 * 1024 * 1024 Then ' 50MB threshold
        Console.Warn("Large PDF detected, performance may be affected")
    End If
Catch error As Exception
    Console.Error.WriteLine("PDF viewing error: " & error.ToString())
    ' Fallback to server-side rendering
End Try

¿Cómo puedo cargar archivos PDF de diferentes fuentes?

Tu visor de PDF en Blazor puede recuperar y mostrar documentos PDF desde varias fuentes:

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

Estos métodos demuestran cómo cargar archivos PDF desde URL mediante HTTPS, convertir contenido HTML a PDF y mostrar el contenido PDF resultante. El método LoadFromUrl recupera documentos PDF de ubicaciones remotas, mientras que LoadFromHtmlContent muestra cómo convertir HTML a PDF sobre la marcha, lo que proporciona flexibilidad en la forma en que su componente visor de PDF de Blazor obtiene su contenido. El motor de renderizado de Chrome garantiza una conversión precisa.

Las opciones de fuente adicionales incluyen:

• Azure Blob Storage para almacenamiento de PDF basado en la nube
• Flujos de bases de datos para acceso seguro a documentos
• Archivos Markdown convertidos a PDF dinámicamente
• Documentos XML transformados con XSLT
• Archivos RTF convertidos a pedido

Considere la conversión de DOCX a PDF para documentos de Microsoft Word y de imágenes a PDF para archivos de fotografías.

private async Task<PdfDocument> LoadFromUrlWithRetry(string url, int maxRetries = 3)
{
    for (int i = 0; i < maxRetries; i++)
    {
        try
        {
            using var client = new HttpClient();
            client.Timeout = TimeSpan.FromSeconds(30);

            var response = await client.GetAsync(url);
            response.EnsureSuccessStatusCode();

            var stream = await response.Content.ReadAsStreamAsync();
            return new PdfDocument(stream);
        }
        catch (HttpRequestException ex) when (i < maxRetries - 1)
        {
            await Task.Delay(TimeSpan.FromSeconds(Math.Pow(2, i))); // Exponential backoff
        }
    }
    throw new Exception($"Failed to load PDF from {url} after {maxRetries} attempts");
}

private async Task<PdfDocument> LoadFromUrlWithRetry(string url, int maxRetries = 3)
{
    for (int i = 0; i < maxRetries; i++)
    {
        try
        {
            using var client = new HttpClient();
            client.Timeout = TimeSpan.FromSeconds(30);

            var response = await client.GetAsync(url);
            response.EnsureSuccessStatusCode();

            var stream = await response.Content.ReadAsStreamAsync();
            return new PdfDocument(stream);
        }
        catch (HttpRequestException ex) when (i < maxRetries - 1)
        {
            await Task.Delay(TimeSpan.FromSeconds(Math.Pow(2, i))); // Exponential backoff
        }
    }
    throw new Exception($"Failed to load PDF from {url} after {maxRetries} attempts");
}

Imports System
Imports System.Net.Http
Imports System.Threading.Tasks

Private Async Function LoadFromUrlWithRetry(url As String, Optional maxRetries As Integer = 3) As Task(Of PdfDocument)
    For i As Integer = 0 To maxRetries - 1
        Try
            Using client As New HttpClient()
                client.Timeout = TimeSpan.FromSeconds(30)

                Dim response = Await client.GetAsync(url)
                response.EnsureSuccessStatusCode()

                Dim stream = Await response.Content.ReadAsStreamAsync()
                Return New PdfDocument(stream)
            End Using
        Catch ex As HttpRequestException When i < maxRetries - 1
            Await Task.Delay(TimeSpan.FromSeconds(Math.Pow(2, i))) ' Exponential backoff
        End Try
    Next
    Throw New Exception($"Failed to load PDF from {url} after {maxRetries} attempts")
End Function

¿Cómo puedo agregar funciones interactivas a mi visor de PDF?

Mejore su visor de PDF con funcionalidad interactiva:

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

@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

Este código agrega navegación entre páginas PDF , funcionalidad de rotación (incluida rotación en sentido antihorario) y la capacidad de imprimir archivos PDF . La funcionalidad de descarga permite a los usuarios guardar archivos PDF localmente. Estas características transforman su visor de PDF básico en un visor eficaz con una barra de herramientas incorporada que proporciona una funcionalidad esencial para los usuarios que trabajan con documentos PDF. Considere agregar números de página y marcadores para la navegación.

private async Task<string> RenderSpecificPage(int pageNumber)
{
    var pdfDocument = PdfDocument.FromFile("document.pdf");
    // Extract single page for faster rendering
    var singlePagePdf = pdfDocument.CopyPage(pageNumber - 1);

    // Convert to image for preview
    var imageData = singlePagePdf.RasterizeToImageFiles("preview_*.png", 150);

    return Convert.ToBase64String(imageData[0]);
}

private async Task<string> RenderSpecificPage(int pageNumber)
{
    var pdfDocument = PdfDocument.FromFile("document.pdf");
    // Extract single page for faster rendering
    var singlePagePdf = pdfDocument.CopyPage(pageNumber - 1);

    // Convert to image for preview
    var imageData = singlePagePdf.RasterizeToImageFiles("preview_*.png", 150);

    return Convert.ToBase64String(imageData[0]);
}

Private Async Function RenderSpecificPage(pageNumber As Integer) As Task(Of String)
    Dim pdfDocument = PdfDocument.FromFile("document.pdf")
    ' Extract single page for faster rendering
    Dim singlePagePdf = pdfDocument.CopyPage(pageNumber - 1)

    ' Convert to image for preview
    Dim imageData = singlePagePdf.RasterizeToImageFiles("preview_*.png", 150)

    Return Convert.ToBase64String(imageData(0))
End Function

¿Cómo manejo el llenado y las anotaciones de formularios PDF?

Para documentos PDF con campos de formulario y anotaciones , IronPDF proporciona soporte confiable:

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

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

Esto habilita capacidades de llenado de formularios dentro de su componente visor de PDF de Blazor, lo que permite a los usuarios interactuar con los campos de formulario directamente en el navegador. El código itera a través de los campos de formulario en el documento PDF y puede establecer valores programáticamente, siendo ideal para aplicaciones que requieren rellenado de formularios dinámico. El soporte incluye firmas digitales y anotaciones de texto .

private async Task SaveFormData()
{
    var pdfWithFormData = PdfDocument.FromFile("filled-form.pdf");

    // Extract form data
    var formData = new Dictionary<string, string>();
    foreach (var field in pdfWithFormData.Form.Fields)
    {
        formData[field.Name] = field.Value;
    }

    // Save to database or JSON
    var json = System.Text.Json.JsonSerializer.Serialize(formData);
    await File.WriteAllTextAsync("form-data.json", json);

    // Flatten form to prevent further editing
    pdfWithFormData.Form.Flatten();
    pdfWithFormData.SaveAs("form-submission.pdf");
}

private async Task SaveFormData()
{
    var pdfWithFormData = PdfDocument.FromFile("filled-form.pdf");

    // Extract form data
    var formData = new Dictionary<string, string>();
    foreach (var field in pdfWithFormData.Form.Fields)
    {
        formData[field.Name] = field.Value;
    }

    // Save to database or JSON
    var json = System.Text.Json.JsonSerializer.Serialize(formData);
    await File.WriteAllTextAsync("form-data.json", json);

    // Flatten form to prevent further editing
    pdfWithFormData.Form.Flatten();
    pdfWithFormData.SaveAs("form-submission.pdf");
}

Private Async Function SaveFormData() As Task
    Dim pdfWithFormData = PdfDocument.FromFile("filled-form.pdf")

    ' Extract form data
    Dim formData As New Dictionary(Of String, String)()
    For Each field In pdfWithFormData.Form.Fields
        formData(field.Name) = field.Value
    Next

    ' Save to database or JSON
    Dim json = System.Text.Json.JsonSerializer.Serialize(formData)
    Await File.WriteAllTextAsync("form-data.json", json)

    ' Flatten form to prevent further editing
    pdfWithFormData.Form.Flatten()
    pdfWithFormData.SaveAs("form-submission.pdf")
End Function

¿Cómo puedo mejorar el rendimiento de archivos PDF de gran tamaño?

Para garantizar un alto rendimiento al mostrar archivos PDF, especialmente para archivos PDF grandes:

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

Este enfoque carga archivos PDF grandes en fragmentos, lo que evita problemas de memoria y garantiza un rendimiento fluido incluso con documentos PDF de gran tamaño. Es especialmente útil cuando se trabaja con archivos PDF en dispositivos móviles o sistemas con recursos limitados. Considere implementar estrategias de prevención de pérdida de memoria .

Las estrategias de optimización adicionales incluyen:

• Linealización para visualización web rápida
• Compresión para reducir el tamaño de los archivos
• Procesamiento paralelo de múltiples PDF
• Mecanismos de almacenamiento en caché para documentos a los que se accede con frecuencia
• Gestión del flujo de memoria para un uso eficiente de los recursos

Para entornos Docker , mejorar la configuración del contenedor. En AWS Lambda , administre la asignación de memoria con cuidado.

private async Task<bool> CheckMemoryBeforeLoad(long fileSize)
{
    var memoryInfo = GC.GetTotalMemory(false);
    var availableMemory = GC.GetTotalMemory(true);

    // Conservative estimate: file size * 3 for processing overhead
    var requiredMemory = fileSize * 3;

    if (requiredMemory > availableMemory * 0.8) // 80% threshold
    {
        // Trigger garbage collection
        GC.Collect();
        GC.WaitForPendingFinalizers();
        GC.Collect();

        // Re-check after cleanup
        availableMemory = GC.GetTotalMemory(true);
        return requiredMemory <= availableMemory * 0.8;
    }

    return true;
}

private async Task<bool> CheckMemoryBeforeLoad(long fileSize)
{
    var memoryInfo = GC.GetTotalMemory(false);
    var availableMemory = GC.GetTotalMemory(true);

    // Conservative estimate: file size * 3 for processing overhead
    var requiredMemory = fileSize * 3;

    if (requiredMemory > availableMemory * 0.8) // 80% threshold
    {
        // Trigger garbage collection
        GC.Collect();
        GC.WaitForPendingFinalizers();
        GC.Collect();

        // Re-check after cleanup
        availableMemory = GC.GetTotalMemory(true);
        return requiredMemory <= availableMemory * 0.8;
    }

    return true;
}

Private Async Function CheckMemoryBeforeLoad(fileSize As Long) As Task(Of Boolean)
    Dim memoryInfo = GC.GetTotalMemory(False)
    Dim availableMemory = GC.GetTotalMemory(True)

    ' Conservative estimate: file size * 3 for processing overhead
    Dim requiredMemory = fileSize * 3

    If requiredMemory > availableMemory * 0.8 Then ' 80% threshold
        ' Trigger garbage collection
        GC.Collect()
        GC.WaitForPendingFinalizers()
        GC.Collect()

        ' Re-check after cleanup
        availableMemory = GC.GetTotalMemory(True)
        Return requiredMemory <= availableMemory * 0.8
    End If

    Return True
End Function

¿Cómo implemento seguridad para archivos PDF protegidos con contraseña?

Al trabajar con archivos PDF protegidos con contraseña :

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

Este código demuestra cómo cargar documentos PDF protegidos con contraseña manteniendo la seguridad mediante la configuración adecuada de los encabezados. Considere las firmas digitales para mejorar la autenticación.

private void ConfigureSecurityHeaders(HttpResponse response)
{
    response.Headers.Add("X-Content-Type-Options", "nosniff");
    response.Headers.Add("X-Frame-Options", "DENY");
    response.Headers.Add("Content-Security-Policy", 
        "default-src 'self'; script-src 'self' 'unsafe-inline'; object-src 'none'");
    response.Headers.Add("Referrer-Policy", "no-referrer");
    response.Headers.Add("Permissions-Policy", "camera=(), microphone=(), geolocation=()");
}

private void ConfigureSecurityHeaders(HttpResponse response)
{
    response.Headers.Add("X-Content-Type-Options", "nosniff");
    response.Headers.Add("X-Frame-Options", "DENY");
    response.Headers.Add("Content-Security-Policy", 
        "default-src 'self'; script-src 'self' 'unsafe-inline'; object-src 'none'");
    response.Headers.Add("Referrer-Policy", "no-referrer");
    response.Headers.Add("Permissions-Policy", "camera=(), microphone=(), geolocation=()");
}

Private Sub ConfigureSecurityHeaders(response As HttpResponse)
    response.Headers.Add("X-Content-Type-Options", "nosniff")
    response.Headers.Add("X-Frame-Options", "DENY")
    response.Headers.Add("Content-Security-Policy", 
                         "default-src 'self'; script-src 'self' 'unsafe-inline'; object-src 'none'")
    response.Headers.Add("Referrer-Policy", "no-referrer")
    response.Headers.Add("Permissions-Policy", "camera=(), microphone=(), geolocation=()")
End Sub

¿Cuáles son los puntos clave para Blazor PDF Display?

La implementación de un visor de PDF Blazor con IronPDF proporciona a los desarrolladores una solución completa para mostrar archivos PDF en aplicaciones web. Desde la visualización básica hasta funciones avanzadas como el llenado de formularios y anotaciones , el componente visor de PDF de IronPDF ofrece la funcionalidad necesaria para aplicaciones profesionales.

Los ejemplos que se muestran demuestran cómo crear un visor de PDF Blazor confiable que pueda manejar varias fuentes de PDF, proporcionar funciones interactivas y mantener un alto rendimiento . Ya sea que esté creando un visor de documentos simple o un sistema de gestión de documentos complejo, la integración de IronPDF con las aplicaciones de Blazor Server facilita la implementación de capacidades profesionales de visualización de PDF. El motor de renderizado de Chrome garantiza resultados consistentes en todas las plataformas.

Los principales beneficios de usar IronPDF para la visualización de PDF en Blazor incluyen:

• Compatibilidad multiplataforma con renderizado consistente
• Funciones de seguridad avanzadas para documentos confidenciales
• Optimización del rendimiento para archivos grandes
• Capacidades completas de manejo de formularios
• Integración fluida con aplicaciones .NET existentes

Para escenarios de implementación específicos, IronPDF es compatible con Azure , AWS , Docker y entornos Windows tradicionales. La biblioteca también se integra con aplicaciones F# y VB.NET .

¿Listo para implementar tu propio visor de PDF? Comience hoy su prueba gratuita de IronPDF y acceda a documentación completa , aplicaciones de demostración y soporte para desarrolladores para crear experiencias de visualización de PDF efectivas en sus aplicaciones Blazor. La guía de inicio rápido le ayuda a comenzar de inmediato, mientras que los ejemplos de código demuestran implementaciones prácticas.