Saltar al pie de página
USANDO IRONPDF

Cómo mostrar PDFs en Blazor con IronPDF

Para mostrar archivos PDF en aplicaciones Blazor , utilice el componente visor de PDF de IronPDF, que se integra con las aplicaciones Blazor Server y proporciona una representación de PDF de alto rendimiento con funciones como llenado de formularios, anotaciones y compatibilidad con dispositivos móviles, todo ello sin depender de herramientas de navegador de terceros.

¿Por qué una aplicación Blazor necesita un visor de PDF dedicado?

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 con su aplicación Blazor Server . Esto permite una representación de PDF de alto rendimiento y una gran funcionalidad sin depender de herramientas de navegador de terceros.

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 aplicaciones que requieren estándares de cumplimiento y funciones de seguridad avanzadas.

El marco Blazor , desarrollado sobre ASP.NET Core de Microsoft , permite el desarrollo basado en componentes que se combinan naturalmente con las bibliotecas de manipulación de PDF. En lugar de incorporar un widget de visualización de terceros desde una CDN externa, puede crear un componente adaptado a los requisitos exactos de su aplicación.

¿Cómo instalar IronPDF en un proyecto Blazor ?

Antes de implementar su visor de PDF Blazor , instale IronPDF. Agréguelo a su aplicación Blazor Server a través de NuGet usando la Consola del Administrador de paquetes o la CLI de .NET :

Install-Package IronPdf
Install-Package IronPdf
SHELL
dotnet add package IronPdf
dotnet add package IronPdf
SHELL

A continuación, cree una nueva aplicación Blazor y asegúrese de tener instalada la última versión de .NET . Almacene archivos PDF en la carpeta wwwroot para acceder fácilmente a ellos o cárguelos 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.

¿Qué requisitos previos se requieren?

Para implementar con éxito un visor de PDF de Blazor , asegúrese de tener:

  • .NET 10 instalado en su máquina de desarrollo
  • Visual Studio 2022 o Visual Studio Code con extensiones de C#
  • Clave de licencia de IronPDF (disponible a través de una prueba gratuita )
  • Comprensión básica de la estructura de componentes de Blazor
  • Un archivo PDF de muestra para probar (colóquelo en la carpeta wwwroot)

Para la implementación de Windows , asegúrese de tener el entorno de ejecución de Visual C++ adecuado. Los usuarios de Linux deben instalar las dependencias necesarias, mientras que los desarrolladores de macOS deben considerar la compatibilidad entre Intel y Apple Silicon.

¿Dónde deben almacenarse los archivos PDF?

La ubicación de almacenamiento de archivos PDF afecta significativamente el rendimiento y la seguridad de su aplicación. Para las aplicaciones Blazor , considere estas opciones:

  • Carpeta wwwroot : ideal para archivos PDF estáticos sin información confidencial
  • Azure Almacenamiento Blob : para aplicaciones en la nube que requieren almacenamiento flexible
  • Base de datos como matrices de bytes : adecuada para archivos PDF más pequeños que requieren control de acceso
  • Directorios de servidor protegidos : ideales para documentos confidenciales con requisitos de seguridad
  • Flujos de memoria : óptimos para archivos PDF generados dinámicamente mediante HTML a PDF

¿Cómo se crea un componente de visor de PDF de Blazor ?

Cree un componente visor de PDF básico de Blazor que pueda mostrar documentos PDF. Cree un nuevo componente Razor en su proyecto:

@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}";
    }
}
Imports IronPdf
Imports Microsoft.AspNetCore.Hosting
Imports Microsoft.AspNetCore.Components
Imports Microsoft.JSInterop

@page "/pdfviewer"
@rendermode InteractiveServer

<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() = Array.Empty(Of Byte)()

    Private Async Function LoadPdfDocument() As Task
        Dim pdfDocument = PdfDocument.FromFile("wwwroot/sample.pdf")
        pdfData = pdfDocument.BinaryData
        Dim base64 = Convert.ToBase64String(pdfData)
        pdfUrl = $"data:application/pdf;base64,{base64}"
    End Function
End Code
$vbLabelText   $csharpLabel

Este código crea un componente visor de PDF que carga un documento PDF y lo muestra usando un iframe. El método LoadPdfDocument lee un PDF de la carpeta wwwroot y lo convierte en una URL de datos base64 que el iframe procesa directamente. Este enfoque funciona bien con varias versiones de PDF y admite la codificación UTF-8 para documentos internacionales.

¿Cómo carga el componente archivos PDF?

El componente utiliza las capacidades de carga de documentos de IronPDF para leer archivos PDF de manera eficiente. Cuando un usuario hace clic en el botón "Abrir archivo", el método:

  1. Carga el archivo PDF usando PdfDocument.FromFile
  2. Extrae datos binarios del documento PDF cargado
  3. Convierte al formato Base64 para compatibilidad con el navegador.
  4. Crea una URL de datos que los navegadores pueden representar directamente

Este enfoque garantiza la compatibilidad entre diferentes navegadores y al mismo tiempo mantiene un buen rendimiento para la visualización de PDF. El componente puede manejar varios tamaños de papel y orientaciones de página .

Resultado

Captura de pantalla de un componente de visor de PDF de Blazor que muestra un PDF de muestra con el contenido ¿Qué es un PDF?, mostrando controles de navegación, opciones de zoom y un botón Abrir archivo.

¿Cómo utilizar la interoperabilidad de JavaScript para una mejor visualización de PDF?

Para un mejor control sobre la visualización del contenido PDF, utilice la interoperabilidad de JavaScript para manejar la funcionalidad del visor de PDF. Este patrón carga un módulo JavaScript de forma asincrónica y delega la representación a las API de blob/URL nativas del navegador, una técnica muy adecuada para el ciclo de vida de los componentes de Blazor:

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

<h3>IronPDF JavaScript Interop Viewer</h3>
<p>Displays PDF using JavaScript 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
    Private jsModule As IJSObjectReference

    Protected Overrides Async Function OnAfterRenderAsync(firstRender As Boolean) As Task
        If firstRender AndAlso Not pdfLoaded Then
            Try
                jsModule = Await JSRuntime.InvokeAsync(Of IJSObjectReference)(
                    "import", "./pdfViewerInterop.js")
                Await LoadPdfWithJavaScript()
                pdfLoaded = True
            Catch ex As Exception
                ErrorMessage = $"Failed to load JS module: {ex.Message}"
            Finally
                StateHasChanged()
            End Try
        End If
    End Function

    Private Async Function LoadPdfWithJavaScript() As Task
        If jsModule Is Nothing Then Return
        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)
        Await jsModule.InvokeVoidAsync("displayPdf", documentId, pdf.BinaryData)
    End Function

    Public Async Function DisposeAsync() As ValueTask Implements IAsyncDisposable.DisposeAsync
        If jsModule IsNot Nothing Then
            Await jsModule.DisposeAsync()
        End If
    End Function
}
$vbLabelText   $csharpLabel

Agregue la función JavaScript correspondiente a su archivo wwwroot/pdfViewerInterop.js. Tenga en cuenta que este archivo usa JavaScript (no C#) y se guarda como un módulo .js.

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);
}
The provided code is JavaScript, not C#. Therefore, it cannot be directly converted to VB.NET, as VB.NET is a server-side language and JavaScript is a client-side language. If you have C# code that you need converted to VB.NET, please provide that code for conversion.
$vbLabelText   $csharpLabel

Esta función de JavaScript crea un blob a partir de los datos PDF, genera una URL de objeto y agrega un iframe al contenedor. La técnica admite la representación de JavaScript y retrasos de representación personalizados para documentos complejos.

Resultado

 Interfaz del visor de interoperabilidad de JavaScript de IronPDF que muestra un documento PDF con el contenido ¿Qué es un PDF?, lo que demuestra las capacidades de representación de PDF con JavaScript Blob/ObjectURL

¿Cómo cargar archivos PDF desde múltiples fuentes?

Su visor de PDF Blazor puede recuperar y mostrar documentos PDF de varias fuentes. El siguiente ejemplo muestra la carga desde una URL y desde contenido HTML:

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;
}
Imports System
Imports System.Net.Http
Imports System.Threading.Tasks

Private Async Function LoadFromUrl(url As String) As Task
    Using client As New HttpClient()
        client.Timeout = TimeSpan.FromSeconds(30)
        Dim response = Await client.GetAsync(url)
        response.EnsureSuccessStatusCode()
        Dim stream = Await response.Content.ReadAsStreamAsync()
        Dim pdfDocument As New PdfDocument(stream)
        Await DisplayPdfContent(pdfDocument)
    End Using
End Function

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

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

El método LoadFromUrl recupera documentos PDF de ubicaciones remotas, mientras que LoadFromHtmlContent muestra cómo convertir HTML a PDF sobre la marcha. El motor de renderizado de Chrome garantiza una conversión HTML precisa. Las opciones de origen adicionales incluyen Azure Almacenamiento Blob, flujos de memoria de base de datos y documentos DOCX .

¿Qué método de origen es adecuado para su caso de uso?

Métodos de origen PDF para aplicaciones Blazor
Tipo de fuente Mejor para Actuación Seguridad
Archivos locales Contenido estático Excelente Bajo
URL Documentos externos Bien Medio
Conversión HTML Informes dinámicos Variable Alto
Almacenamiento Blob Aplicaciones empresariales Excelente Alto
Flujos de memoria PDF temporales Excelente Alto

Salida mediante contenido HTML

 La interfaz de prueba de IronPDF demuestra la generación exitosa de PDF a partir de contenido HTML, con opciones para cargar desde URL o generar desde HTML visibles en la parte superior.

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

Amplíe el visor de PDF con funciones de navegación de páginas, rotación, impresión y descarga:

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

Public Class CodeBehind
    Private currentPage As Integer = 1
    Private totalPages As Integer
    Private pdfData As Byte() = Array.Empty(Of Byte)()
    Private pdfUrl As String = ""
    Private rotationClass As String = ""
    Private documentId As String = Guid.NewGuid().ToString()

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

    Private Sub RotateCounterclockwise()
        rotationClass = "rotate-270"
    End Sub

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

    Private Async Function DownloadPdf() As Task
        Await JSRuntime.InvokeVoidAsync("downloadFile", pdfData, "document.pdf")
    End Function
End Class
$vbLabelText   $csharpLabel

Este código agrega funcionalidades de navegación, rotación , impresión y descarga de páginas. Considere agregar números de página y marcadores para documentos con mucha navegación. Las funciones avanzadas pueden incluir extracción de texto y conversión de PDF a HTML.

Resultado

Un componente de visualización de PDF con todas las funciones creado con Blazor, que muestra controles de navegación de documentos, funcionalidad de zoom establecida al 100% y botones de acción personalizados que incluyen opciones de Cargar archivo PDF, Imprimir, Descargar y Rotar.

¿Cómo se gestionan los formularios y las anotaciones en formato PDF?

Para documentos PDF con campos de formulario y anotaciones , IronPDF proporciona un soporte sólido para leer y escribir valores de campo mediante programación:

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");
}
Imports System.IO
Imports System.Threading.Tasks
Imports System.Text.Json

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

    Await DisplayPdfContent(pdfDocument)
End Function

Private Async Function SaveFormData() As Task
    Dim pdfWithFormData = PdfDocument.FromFile("filled-form.pdf")
    Dim formData = pdfWithFormData.Form.Fields.ToDictionary(Function(f) f.Name, Function(f) f.Value)

    Dim json = JsonSerializer.Serialize(formData)
    Await File.WriteAllTextAsync("form-data.json", json)

    pdfWithFormData.Form.Flatten()
    pdfWithFormData.SaveAs("form-submission.pdf")
End Function
$vbLabelText   $csharpLabel

Esto habilita las capacidades de completar formularios dentro del 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 del formulario y establece valores programáticamente, lo que es ideal para aplicaciones que requieren llenado previo dinámico. IronPDF también admite firmas digitales y anotaciones de texto.

Los tipos de campos admitidos incluyen entradas de texto, casillas de verificación, botones de opción, listas desplegables, campos de firma digital, áreas de texto de varias líneas y selectores de fecha.

¿Cuándo debería utilizar el llenado de formularios programático o interactivo?

Comparación de métodos de llenado de formularios
Acercarse Usar cuando Beneficios
Programático Prellenado de datos conocidos Más rápido, consistente y automatizado
Interactivo Se requiere entrada del usuario Validación flexible e inmediata
Híbrido Datos parciales disponibles Lo mejor de ambos enfoques

Considere aplanar los formularios después de enviarlos para evitar manipulaciones. Utilice la desinfección de PDF por seguridad.

Resultado

Ejemplo de la funcionalidad de llenado de formularios del componente visor de PDF, que muestra cómo los usuarios pueden interactuar con formularios PDF directamente en el navegador

¿Cómo optimizar el rendimiento para archivos PDF de gran tamaño?

Para garantizar un buen rendimiento al mostrar archivos PDF, especialmente para archivos grandes, utilice la carga fragmentada y la gestión de memoria:

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);
}
Imports System.IO
Imports System.Threading.Tasks

Private Async Function LoadLargePdf() As Task
    Const chunkSize As Integer = 1024 * 1024 ' 1MB chunks
    Dim pdfPath As String = "largefile.pdf"

    Using fileStream As 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
    End Using

    Await ProcessPdfChunks(chunks)
End Function
$vbLabelText   $csharpLabel

Este enfoque carga archivos PDF grandes en fragmentos, lo que evita problemas de memoria y garantiza un rendimiento fluido incluso con documentos grandes. Es especialmente útil cuando se trabaja con archivos PDF en dispositivos móviles o sistemas con recursos limitados. Consulte la guía de rendimiento de IronPDF para obtener opciones de ajuste adicionales.

Las estrategias de optimización adicionales incluyen linealización para una visualización web rápida, compresión para reducir el tamaño de los archivos y procesamiento asincrónico para manejar varios PDF simultáneamente. Según las mejores prácticas de la PDF Association , los PDF linealizados (optimizados para la web) pueden reducir el tiempo de carga inicial entre un 30 y un 60 % para documentos grandes.

¿Qué tamaño de archivo requiere carga fragmentada?

Guía de estrategia de carga del tamaño de archivo PDF
Tamaño del archivo Estrategia de carga Impacto en la memoria
Menos de 5 MB Carga directa Mínimo
5-20 MB Fragmentación opcional Moderado
20-50 MB Fragmentación recomendada Significativo
Más de 50 MB Fragmentación requerida Crítico

La renderización del lado del servidor resulta beneficiosa cuando se procesan archivos PDF de más de 100 MB, se implementan anotaciones complejas o se admiten múltiples usuarios simultáneos.

¿Cómo proteger un visor de PDF Blazor para archivos protegidos con contraseña?

Al trabajar con archivos PDF protegidos con contraseña , pase la contraseña directamente a PdfDocument.FromFile y configure los encabezados de seguridad HTTP adecuados:

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);
}
Private Async Function LoadSecurePdf(password As String) As Task
    Dim pdfDocument = PdfDocument.FromFile("secure.pdf", password)

    Dim headers = New Dictionary(Of String, String) From {
        {"X-Frame-Options", "SAMEORIGIN"},
        {"Content-Security-Policy", "default-src 'self'"},
        {"X-Content-Type-Options", "nosniff"},
        {"Referrer-Policy", "no-referrer"}
    }

    Await DisplayPdfContent(pdfDocument)
End Function
$vbLabelText   $csharpLabel

Este código demuestra cómo cargar documentos PDF protegidos con contraseña manteniendo la seguridad mediante una configuración de encabezado adecuada. Considere las firmas digitales para una mejor autenticación. Implemente la desinfección de PDF para eliminar contenido potencialmente malicioso y redactar información confidencial.

Al manipular contraseñas, nunca las almacene en texto simple o en código del lado del cliente. Utilice métodos de entrada seguros con la validación adecuada, implemente tiempos de espera de sesión para documentos confidenciales y borre las contraseñas de la memoria después de su uso. La guía de seguridad de ASP.NET Core de Microsoft recomienda siempre validar y desinfectar cualquier credencial proporcionada por el usuario antes de pasarla a las API posteriores.

Descifrado del lado del cliente vs. del lado del servidor

Comparación de seguridad del enfoque de descifrado de PDF
Tipo de descifrado Caso de uso Nivel de seguridad
Del lado del cliente Documentos públicos Bajo
Del lado del servidor Datos sensibles Alto
Híbrido Contenido mixto Medio

Para obtener la máxima seguridad, realice siempre el descifrado en el servidor y transmita el contenido descifrado de forma segura al cliente. Implementar el cumplimiento de PDF/A para las necesidades de archivo a largo plazo.

¿Cuáles son los puntos clave para mostrar archivos PDF en Blazor?

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 maneja varias fuentes de PDF, proporciona funciones interactivas y mantiene un buen rendimiento. Ya sea que se trate de crear 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.

Los beneficios clave incluyen:

  • Compatibilidad multiplataforma con representación consistente en todos los navegadores
  • Funciones de seguridad avanzadas para documentos confidenciales
  • Optimización del rendimiento para archivos grandes mediante carga asincrónica y fragmentada
  • Capacidades completas de manejo de formularios, incluidas firmas digitales
  • Integración fluida con aplicaciones .NET existentes

IronPDF es compatible con Azure, AWS, Docker y entornos Windows tradicionales. ¿Estás listo para construir tu propio visor? Comience con una prueba gratuita de IronPDF y consulte la documentación completa y los ejemplos de código para crear experiencias de visualización de PDF efectivas en sus aplicaciones Blazor .

Preguntas Frecuentes

¿Cómo puedo mostrar un PDF en una aplicación Blazor usando IronPDF?

IronPDF proporciona una API integral que le permite renderizar y mostrar PDFs dentro de aplicaciones Blazor. Al integrar IronPDF, puede implementar fácilmente un componente potente de visor de PDF.

¿Cuáles son los beneficios de usar IronPDF para visualizar PDFs en Blazor?

Usar IronPDF para visualizar PDFs en Blazor ofrece beneficios como el manejo de campos de formulario, la creación de visores interactivos y la renderización de PDFs de alta calidad sin problemas dentro de su aplicación.

¿Es posible manejar campos de formulario en PDFs usando IronPDF en Blazor?

Sí, IronPDF le permite manejar y manipular campos de formulario dentro de documentos PDF en una aplicación Blazor, ofreciendo mayor interactividad y participación del usuario.

¿Puede usar IronPDF para crear visores interactivos de PDF en Blazor?

Absolutamente. IronPDF proporciona herramientas para crear visores interactivos de PDF en Blazor, habilitando características como el manejo de formularios y la visualización de contenido dinámico.

¿Qué características ofrece IronPDF para la manipulación de PDF en Blazor?

IronPDF ofrece características como renderización de PDF, manejo de campos de formulario, extracción de texto y manipulación de páginas, lo que lo convierte en una opción versátil para operaciones de PDF en Blazor.

¿Cómo mejora IronPDF las experiencias de visualización de PDF en aplicaciones Blazor?

IronPDF mejora la experiencia de visualización de PDF en aplicaciones Blazor al proporcionar una renderización fluida, características interactivas y un manejo robusto de documentos PDF.

Curtis Chau
Escritor Técnico

Curtis Chau tiene una licenciatura en Ciencias de la Computación (Carleton University) y se especializa en el desarrollo front-end con experiencia en Node.js, TypeScript, JavaScript y React. Apasionado por crear interfaces de usuario intuitivas y estéticamente agradables, disfruta trabajando con frameworks modernos y creando manuales bien ...

Leer más

Equipo de soporte de Iron

Estamos disponibles online las 24 horas, 5 días a la semana.
Chat
Email
Llámame