Ícono de mensaje
Saltar al pie de página
  1. IronPDF
  2. Blog de IronPDF
  3. Usando IronPDF
  4. Visor de PDF Blazor
USANDO IRONPDF

Cómo construir un visor de PDF Blazor con IronPDF

Curtis Chau
Curtis Chau
Actualizado:

Un visor de PDF de Blazor procesa documentos PDF en línea convirtiéndolos a una URI de datos base64 y cargando el resultado en un elemento <iframe>. ChromePdfRenderer de IronPDF convierte cadenas HTML, URL activas o contenido dinámico en bytes PDF en una única llamada asincrónica, lo que brinda a las aplicaciones Blazor Server y Blazor WebAssembly capacidad completa de generación y visualización de PDF sin complementos de visualización externos.

Las aplicaciones comerciales necesitan regularmente mostrar facturas, contratos e informes sin redirigir a los usuarios a una pestaña separada o depender de la compatibilidad de PDF del navegador, que varía según el dispositivo. El modelo de componentes de Blazor facilita la generación de un PDF en el servidor, su codificación y transmisión a cualquier componente de página, siempre que la biblioteca gestione la conversión de manera confiable.

Esta guía cubre la instalación, la representación basada en URL y HTML, la personalización con encabezados y pies de página, las descargas del navegador mediante la interoperabilidad de JavaScript , una comparación de los enfoques de Blazor Server y Blazor WebAssembly, y cuatro operaciones extendidas: fusión, anotaciones, protección con contraseña y visualización de archivos cargados por el usuario. Se proporcionan componentes Razor y ejemplos de C# de nivel superior equivalentes para cada técnica.

Comience una prueba gratuita de IronPDF para seguir los ejemplos de esta guía.

¿Cómo empiezo a utilizar IronPDF en un proyecto Blazor ?

Para comenzar, es necesario instalar el paquete NuGet y agregar una clave de licencia a Program.cs. Instalar IronPDF desde la consola del administrador de paquetes:

Install-Package IronPdf

Alternativamente, busque "IronPDF" en la interfaz de usuario del Administrador de paquetes NuGet y seleccione la última versión.

NuGet Instalar con NuGet

PM >  Install-Package IronPdf

Echa un vistazo a IronPDF en NuGet para una instalación rápida. Con más de 10 millones de descargas, está transformando el desarrollo de PDF con C#. También puede descargar el DLL o el instalador de Windows.

Después de la instalación, agregue su clave de licencia a Program.cs antes de cualquier operación en PDF:

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";
IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";
$vbLabelText   $csharpLabel

IronPDF es compatible con .NET 10, .NET 9, .NET 8, .NET 6 y .NET Framework 4.6.2 y posteriores. Para el desarrollo y las pruebas, la biblioteca funciona sin una clave de licencia, pero estampa una marca de agua en los PDF generados. Una licencia de prueba gratuita elimina la marca de agua durante la evaluación.

IronPDF admite proyectos Blazor Server y Blazor WebAssembly. En Blazor Server, el motor de renderizado se ejecuta directamente en el servidor. En Blazor WebAssembly, la generación de PDF requiere un punto final de API del lado del servidor; La sección de arquitectura más adelante en esta guía explica ambos enfoques.

¿Cómo puedo mostrar un archivo PDF desde una URL en Blazor?

La forma más directa de crear un visor de PDF de Blazor es convertir una URL en un PDF y mostrarlo en un <iframe>. ChromePdfRenderer de IronPDF obtiene la página web y la convierte a formato PDF utilizando el mismo motor de renderizado de Chrome que impulsa Google Chrome, preservando fielmente el CSS, la salida de JavaScript y el diseño.

Enfoque de componentes de Razor

El siguiente componente de Razor convierte una URL en un PDF y lo muestra en línea. El método GeneratePdf se ejecuta en el servidor de una aplicación Blazor Server, por lo que el motor de renderizado completo de Chrome está disponible:

@page "/pdfviewer"
@using IronPdf

<h3>PDF Viewer</h3>
<button @onclick="GeneratePdf" class="btn btn-primary">Load PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task GeneratePdf()
    {
        var renderer = new ChromePdfRenderer();
        // Convert the URL to PDF using the Chrome rendering engine
        var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");
        // Encode the PDF bytes as a base64 data URI for iframe display
        var base64 = Convert.ToBase64String(pdf.BinaryData);
        pdfDataUri = $"data:application/pdf;base64,{base64}";
    }
}

Ejemplo de C# de nivel superior

Para servicios en segundo plano, aplicaciones de consola o puntos finales de API del lado del servidor, la misma conversión utiliza llamadas de API idénticas fuera de cualquier contexto de componente:

using IronPdf;

var renderer = new ChromePdfRenderer();
// Fetch and convert the target URL to a PDF document
var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");

// Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf");
byte[] pdfBytes = pdf.BinaryData;
using IronPdf;

var renderer = new ChromePdfRenderer();
// Fetch and convert the target URL to a PDF document
var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");

// Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf");
byte[] pdfBytes = pdf.BinaryData;
$vbLabelText   $csharpLabel

RenderUrlAsPdfAsync obtiene la página, ejecuta todo el JavaScript, aplica CSS y devuelve un objeto PdfDocument que contiene la salida renderizada. La propiedad BinaryData expone los bytes del PDF sin procesar para su almacenamiento, transmisión o visualización. El <iframe> muestra la salida con una barra de herramientas de navegador incorporada para hacer zoom, navegar e imprimir.

Cómo crear un visor de PDF de Blazor con IronPDF: Figura 1 - URL a la salida del visor de PDF

¿Cómo personalizar la generación de PDF?

IronPDF proporciona control de salida a través de la clase ChromePdfRenderOptions. Puede configurar el tamaño del papel, ajustar los márgenes y agregar texto o encabezados y pies de página HTML a cada página. La guía de opciones de renderizado cubre la lista completa de propiedades disponibles.

Enfoque de componentes de Razor

El siguiente componente configura papel A4 con márgenes y agrega texto de encabezado y pie de página a cada página. Asigne RenderingOptions antes de llamar a cualquier método de renderizado para aplicarlos globalmente a la instancia del renderizador:

@page "/pdfcustom"
@using IronPdf

<h3>Customized PDF Viewer</h3>
<button @onclick="GenerateCustomizedPdf" class="btn btn-primary">Generate Customized PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task GenerateCustomizedPdf()
    {
        var renderer = new ChromePdfRenderer
        {
            RenderingOptions = new ChromePdfRenderOptions
            {
                PaperSize = IronPdf.Rendering.PdfPaperSize.A4,
                MarginTop = 25,
                MarginBottom = 25,
                MarginLeft = 20,
                MarginRight = 20,
                // Header with dynamic date replacement
                TextHeader = new TextHeaderFooter
                {
                    CenterText = "Monthly Report - {date}",
                    FontSize = 12
                },
                // Footer with page numbering
                TextFooter = new TextHeaderFooter
                {
                    LeftText = "Confidential",
                    RightText = "Page {page} of {total-pages}",
                    FontSize = 10
                }
            }
        };

        var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

Ejemplo de C# de nivel superior

Las mismas opciones se aplican en cualquier contexto .NET . Este patrón funciona bien dentro de una API mínima de ASP.NET Core o un generador de informes programado:

using IronPdf;
using IronPdf.Rendering;

var renderer = new ChromePdfRenderer
{
    RenderingOptions = new ChromePdfRenderOptions
    {
        PaperSize = PdfPaperSize.A4,
        MarginTop = 25,
        MarginBottom = 25,
        TextHeader = new TextHeaderFooter { CenterText = "Report - {date}", FontSize = 12 },
        TextFooter = new TextHeaderFooter { RightText = "Page {page} of {total-pages}", FontSize = 10 }
    }
};

var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
pdf.SaveAs("customized-report.pdf");
using IronPdf;
using IronPdf.Rendering;

var renderer = new ChromePdfRenderer
{
    RenderingOptions = new ChromePdfRenderOptions
    {
        PaperSize = PdfPaperSize.A4,
        MarginTop = 25,
        MarginBottom = 25,
        TextHeader = new TextHeaderFooter { CenterText = "Report - {date}", FontSize = 12 },
        TextFooter = new TextHeaderFooter { RightText = "Page {page} of {total-pages}", FontSize = 10 }
    }
};

var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
pdf.SaveAs("customized-report.pdf");
$vbLabelText   $csharpLabel

Las variables de plantilla, como {page}, {total-pages} y {date}, se reemplazan con los valores reales en el momento del renderizado. Para diseños de marca complejos, utilice las propiedades HtmlHeader y HtmlFooter en lugar de TextHeader y TextFooter. La guía de encabezados y pies de página contiene ejemplos completos para ambos enfoques.

Cómo crear un visor de PDF de Blazor con IronPDF: Figura 2: PDF personalizado abierto en el visor de PDF

¿Cuál es la mejor forma de habilitar las descargas de PDF?

La visualización de archivos PDF en un <iframe> gestiona la visualización, pero con frecuencia los usuarios necesitan descargar el archivo. La interoperabilidad de JavaScript activa una descarga del navegador desde un flujo de bytes .NET . Para obtener patrones de descarga y exportación adicionales, consulte la guía de exportación y guardado en PDF .

Enfoque de componentes de Razor

Inyecte IJSRuntime en el componente y llame a una función auxiliar de JavaScript para iniciar la descarga. El DotNetStreamReference transmite los bytes del PDF sin cargar todo el archivo en la memoria de JavaScript de una sola vez:

@page "/pdfdownload"
@using IronPdf
@inject IJSRuntime JSRuntime

<h3>Download PDF</h3>
<button @onclick="DownloadPdf" class="btn btn-success">Download PDF</button>

@code {
    private async Task DownloadPdf()
    {
        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
        // Stream the PDF bytes to the browser as a downloadable file
        using var streamRef = new DotNetStreamReference(stream: new MemoryStream(pdf.BinaryData));
        await JSRuntime.InvokeVoidAsync("downloadFileFromStream", "invoice.pdf", streamRef);
    }
}

Agregue esta función de JavaScript a su archivo _Host.cshtml o App.razor, como se describe en la documentación de interoperabilidad de JavaScript de Blazor de Microsoft :

window.downloadFileFromStream = async (fileName, contentStreamReference) => {
    const arrayBuffer = await contentStreamReference.arrayBuffer();
    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);
    const anchorElement = document.createElement('a');
    anchorElement.href = url;
    anchorElement.download = fileName ?? '';
    anchorElement.click();
    anchorElement.remove();
    URL.revokeObjectURL(url);
};
window.downloadFileFromStream = async (fileName, contentStreamReference) => {
    const arrayBuffer = await contentStreamReference.arrayBuffer();
    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);
    const anchorElement = document.createElement('a');
    anchorElement.href = url;
    anchorElement.download = fileName ?? '';
    anchorElement.click();
    anchorElement.remove();
    URL.revokeObjectURL(url);
};
JAVASCRIPT

Ejemplo de C# de nivel superior

En un punto final de API del lado del servidor, devuelva los bytes de PDF directamente usando Results.File. El navegador recibe el archivo con los encabezados Content-Disposition correctos y activa la descarga automáticamente:

using IronPdf;

// ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
    // Return with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "invoice.pdf");
});
using IronPdf;

// ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
    // Return with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "invoice.pdf");
});
$vbLabelText   $csharpLabel

¿Cómo puedo generar archivos PDF a partir de Razor Components?

La generación de archivos PDF a partir de HTML proporciona un control total sobre el diseño, la vinculación de datos y el estilo. Este enfoque se adapta a facturas, informes y cualquier documento creado a partir de datos de aplicaciones en vivo. Para conocer técnicas de renderizado más avanzadas, consulte la guía de conversión de HTML a PDF .

Enfoque de componentes de Razor

El siguiente componente crea una cadena HTML de factura a partir de datos de C# y la convierte en PDF. El ChromePdfRenderer trata la cadena HTML de la misma manera que una página web, aplicando todo el CSS y representándola con el motor Chrome:

@page "/invoicedemo"
@using IronPdf

<h3>Invoice Generator</h3>
<button @onclick="GenerateInvoice" class="btn btn-primary">Generate Invoice PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task GenerateInvoice()
    {
        var invoiceHtml = $@"
            <html>
            <head>
                <style>
                    body {{ font-family: Arial, sans-serif; }}
                    .header {{ background-color: #f0f0f0; padding: 20px; }}
                    .invoice-table {{ width: 100%; border-collapse: collapse; }}
                    .invoice-table th, .invoice-table td {{ border: 1px solid #ddd; padding: 8px; }}
                    .total {{ font-weight: bold; font-size: 18px; }}
                </style>
            </head>
            <body>
                <div class='header'>
                    <h1>Invoice #INV-2025-001</h1>
                    <p>Date: {DateTime.Now:MM/dd/yyyy}</p>
                </div>
                <table class='invoice-table'>
                    <thead>
                        <tr>
                            <th>Item</th><th>Quantity</th><th>Price</th><th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>IronPDF License</td><td>1</td><td>$749</td><td>$749</td>
                        </tr>
                        <tr>
                            <td>Priority Support</td><td>1</td><td>$250</td><td>$250</td>
                        </tr>
                    </tbody>
                </table>
                <p class='total'>Total Amount: $999</p>
            </body>
            </html>";

        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync(invoiceHtml);
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

Ejemplo de C# de nivel superior

El mismo enfoque de cadena HTML funciona en cualquier contexto .NET , incluidas aplicaciones de consola, servicios en segundo plano y puntos finales de API . La interpolación de cadenas de C# o una biblioteca de plantillas inserta datos dinámicos antes de pasar la cadena al renderizador:

using IronPdf;

var html = """
    <html>
    <body>
        <h1>Invoice #INV-2025-001</h1>
        <table>
            <tr><th>Item</th><th>Total</th></tr>
            <tr><td>IronPDF License</td><td>$749</td></tr>
            <tr><td>Priority Support</td><td>$250</td></tr>
        </table>
        <p><strong>Total: $999</strong></p>
    </body>
    </html>
    """;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync(html);
pdf.SaveAs("invoice.pdf");
using IronPdf;

var html = """
    <html>
    <body>
        <h1>Invoice #INV-2025-001</h1>
        <table>
            <tr><th>Item</th><th>Total</th></tr>
            <tr><td>IronPDF License</td><td>$749</td></tr>
            <tr><td>Priority Support</td><td>$250</td></tr>
        </table>
        <p><strong>Total: $999</strong></p>
    </body>
    </html>
    """;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync(html);
pdf.SaveAs("invoice.pdf");
$vbLabelText   $csharpLabel

RenderHtmlAsPdfAsync acepta cualquier cadena HTML válida, incluyendo CSS en línea y JavaScript incrustado. La implementación maneja el diseño, la representación de fuentes y los saltos de página automáticamente.

Cómo crear un visor de PDF de Blazor con IronPDF: Figura 3 - PDF de factura en el visor

¿En qué se diferencia un visor de PDF de Blazor Server de Blazor WebAssembly?

El modelo de alojamiento determina dónde se ejecuta la generación de PDF y cómo llegan los bytes al navegador. Comprender esta distinción evita un error arquitectónico común al crear visores de PDF de Blazor .

Blazor Server ejecuta todo el código C# en el servidor. ChromePdfRenderer se ejecuta en el lado del servidor y los bytes resultantes se envían al navegador a través de la conexión SignalR existente. Esta es la ruta de integración más sencilla y no requiere puntos finales de API ni llamadas de red adicionales más allá de lo que se muestra en las secciones anteriores.

Blazor WebAssembly ejecuta C# en el entorno aislado del navegador usando WASM. El motor de renderizado de IronPDF depende de binarios nativos que no pueden ejecutarse dentro del entorno limitado del navegador, por lo que ChromePdfRenderer no está disponible directamente en un proyecto WASM. El enfoque correcto es llamar a un punto final de API del lado del servidor que realiza la generación de PDF y devuelve los bytes como respuesta.

Configuración de una API de generación de PDF para Blazor WebAssembly

En el servidor, defina un punto final de API mínimo que genere y devuelva el PDF:

// Program.cs (ASP.NET Core host project)
using IronPdf;

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";

app.MapGet("/api/pdf/report", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Quarterly Report</h1><p>Generated server-side.</p>");
    // Return PDF bytes with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "report.pdf");
});
// Program.cs (ASP.NET Core host project)
using IronPdf;

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";

app.MapGet("/api/pdf/report", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Quarterly Report</h1><p>Generated server-side.</p>");
    // Return PDF bytes with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "report.pdf");
});
$vbLabelText   $csharpLabel

En el cliente WASM, inyecte HttpClient y llame al punto final de la API. La plantilla de proyecto alojada Blazor WASM preconfigura HttpClient para apuntar a la dirección base del servidor:

@page "/wasm-pdf-viewer"
@inject HttpClient Http

<h3>PDF Viewer</h3>
<button @onclick="LoadPdf" class="btn btn-primary">Load Report</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task LoadPdf()
    {
        // Fetch PDF bytes from the server-side generation endpoint
        var bytes = await Http.GetByteArrayAsync("/api/pdf/report");
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(bytes)}";
    }
}

Este patrón mantiene todo el trabajo de renderizado pesado en el servidor mientras el cliente WASM solo maneja la pantalla. Para uso en producción, agregue autenticación al punto final de la API y limite el contenido PDF generado a los datos del usuario autenticado.

¿Qué otras operaciones con PDF puedo realizar?

La API de IronPDF se extiende mucho más allá de la visualización básica. Las siguientes secciones cubren cuatro operaciones comúnmente necesarias en los flujos de trabajo de documentos de Blazor : fusionar varios documentos, agregar anotaciones, aplicar protección con contraseña y mostrar archivos cargados por el usuario.

¿Cómo fusiono varios documentos PDF?

La fusión combina varias instancias de PdfDocument en un solo archivo, lo cual resulta útil para ensamblar secciones de informes, agregar apéndices o concatenar archivos seleccionados por el usuario. La guía de fusión y división de PDF cubre las operaciones de inserción y división a nivel de página.

using IronPdf;

var renderer = new ChromePdfRenderer();

// Generate two separate sections as individual PDF documents
var section1 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 1: Overview</h1>");
var section2 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 2: Details</h1>");

// Merge into a single document preserving all pages
var merged = PdfDocument.Merge(section1, section2);
merged.SaveAs("combined-report.pdf");
using IronPdf;

var renderer = new ChromePdfRenderer();

// Generate two separate sections as individual PDF documents
var section1 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 1: Overview</h1>");
var section2 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 2: Details</h1>");

// Merge into a single document preserving all pages
var merged = PdfDocument.Merge(section1, section2);
merged.SaveAs("combined-report.pdf");
$vbLabelText   $csharpLabel

Para mostrar el documento fusionado en un componente Blazor , pase merged.BinaryData al patrón de URI de datos base64 de las secciones anteriores. El objeto fusionado PdfDocument también acepta operaciones adicionales (marca de agua, configuración de seguridad o adición de páginas adicionales) antes de codificarse para su visualización.

¿Cómo agrego anotaciones a un PDF?

Las anotaciones adjuntan notas y comentarios del revisor a ubicaciones de páginas específicas sin alterar el contenido del documento subyacente. IronPDF admite anotaciones de texto, cuadros de texto libre y otros tipos de marcado. Consulte la guía de anotaciones para ver la lista completa de propiedades de anotación.

using IronPdf;
using IronPdf.Annotations;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Contract Document</h1><p>Review required on clause 3.</p>");

// Add a text annotation to page 0 at position (50, 650)
var annotation = new TextAnnotation(pageIndex: 0)
{
    Title = "Reviewer Note",
    Contents = "Please confirm clause 3 before signing.",
    X = 50,
    Y = 650,
    Width = 200,
    Height = 50,
    Printable = false,
    OpenByDefault = true
};

pdf.Annotations.Add(annotation);
pdf.SaveAs("annotated-contract.pdf");
using IronPdf;
using IronPdf.Annotations;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Contract Document</h1><p>Review required on clause 3.</p>");

// Add a text annotation to page 0 at position (50, 650)
var annotation = new TextAnnotation(pageIndex: 0)
{
    Title = "Reviewer Note",
    Contents = "Please confirm clause 3 before signing.",
    X = 50,
    Y = 650,
    Width = 200,
    Height = 50,
    Printable = false,
    OpenByDefault = true
};

pdf.Annotations.Add(annotation);
pdf.SaveAs("annotated-contract.pdf");
$vbLabelText   $csharpLabel

Las anotaciones se conservan cuando el PDF se abre en cualquier visor estándar, incluida la pantalla del navegador <iframe>. Para las aplicaciones Blazor , ejecute la lógica de anotación del lado del servidor y devuelva pdf.BinaryData al componente para su visualización.

¿Cómo aplico protección con contraseña a un PDF?

La protección con contraseña restringe el acceso a documentos confidenciales, como informes financieros o registros de RR.HH. IronPDF admite contraseñas de usuario (necesarias para abrir el documento) y contraseñas de propietario (necesarias para cambiar permisos). La guía de seguridad en PDF enumera todos los indicadores de permiso disponibles.

using IronPdf;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Confidential Report</h1>");

// Set the password required to open the document
pdf.Password = "user-open-password";
// Set the owner password to control editing and printing rights
pdf.SecuritySettings.OwnerPassword = "owner-edit-password";
pdf.SecuritySettings.AllowUserPrinting = IronPdf.Security.PdfPrintSecurity.FullPrintRights;
pdf.SecuritySettings.AllowUserCopyPasteContent = false;

pdf.SaveAs("protected-report.pdf");
using IronPdf;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Confidential Report</h1>");

// Set the password required to open the document
pdf.Password = "user-open-password";
// Set the owner password to control editing and printing rights
pdf.SecuritySettings.OwnerPassword = "owner-edit-password";
pdf.SecuritySettings.AllowUserPrinting = IronPdf.Security.PdfPrintSecurity.FullPrintRights;
pdf.SecuritySettings.AllowUserCopyPasteContent = false;

pdf.SaveAs("protected-report.pdf");
$vbLabelText   $csharpLabel

Los archivos PDF protegidos con contraseña muestran una solicitud de contraseña en el navegador <iframe>. Este enfoque funciona para documentos distribuidos mediante descarga; Para la visualización en línea sin solicitud, aplique la contraseña solo a los documentos devueltos a través de la ruta de descarga.

¿Cómo puedo mostrar los PDF cargados por el usuario?

Para mostrar un PDF que un usuario ha cargado es necesario leer los bytes del archivo entrante y codificarlos como un URI de datos. El componente de carga a continuación utiliza el control InputFile de Blazor para capturar el archivo y luego lo muestra directamente sin necesidad de volver a renderizarlo:

@page "/upload-viewer"
@using IronPdf

<h3>Upload and View a PDF</h3>
<InputFile OnChange="LoadUploadedPdf" accept=".pdf" />
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task LoadUploadedPdf(InputFileChangeEventArgs e)
    {
        using var stream = e.File.OpenReadStream(maxAllowedSize: 10 * 1024 * 1024);
        using var ms = new MemoryStream();
        await stream.CopyToAsync(ms);
        var bytes = ms.ToArray();
        // Encode the uploaded PDF bytes directly for display
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(bytes)}";
    }
}

Para los archivos PDF cargados que requieren procesamiento del lado del servidor antes de su visualización, como marca de agua , extracción de página o reencriptación, cargue primero los bytes en un PdfDocument:

var pdf = new PdfDocument(bytes);
// Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
var pdf = new PdfDocument(bytes);
// Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
$vbLabelText   $csharpLabel

Esto mantiene la misma estructura de componentes al tiempo que habilita la API IronPDF completa en el archivo cargado.

¿Cuales son mis próximos pasos?

Esta guía cubrió el flujo de trabajo completo para un visor de PDF Blazor con IronPDF: instalación en .NET 10, representación de URL y HTML, personalización de salida con encabezados y pies de página, interoperabilidad de JavaScript para descargas del navegador, la diferencia arquitectónica entre Blazor Server y Blazor WebAssembly, y cuatro operaciones de documentos: fusión, anotaciones, protección con contraseña y cargas de usuarios.

Para ampliar esta base, explore estos recursos:

Obtenga su licencia de prueba gratuita para eliminar marcas de agua y probar IronPDF en su aplicación Blazor . IronPDF admite proyectos .NET 10 , ASP.NET Core, Blazor Server y Blazor WebAssembly alojados sin configuración adicional. Para obtener orientación adicional sobre la integración, consulte la documentación oficial de Blazor de Microsoft .

Preguntas Frecuentes

¿Qué es un visor de PDF Blazor?

Un visor de PDF en Blazor es un componente que muestra documentos PDF en línea en una aplicación de Blazor Server o WebAssembly. Por lo general, convierte bytes de PDF a un URI de datos base64 y los renderiza dentro de un elemento iframe, dando a los usuarios una barra de herramientas integrada del navegador para zoom, navegación e impresión.

¿Cómo muestro un PDF en una aplicación de Blazor Server?

Instala IronPDF a través de NuGet, agrega tu clave de licencia en Program.cs, luego usa ChromePdfRenderer para generar bytes de PDF desde una URL o cadena HTML. Codifica los bytes como un URI de datos base64 y asígnalos al atributo src de un iframe en tu componente Razor.

¿Puede IronPDF ejecutarse en un proyecto de Blazor WebAssembly?

El motor de renderización de IronPDF requiere binarios nativos que no pueden ejecutarse en el entorno aislado de WASM del navegador. Para proyectos de Blazor WebAssembly, crea un punto final de API de ASP.NET Core del lado del servidor que genere el PDF con IronPDF y devuelva los bytes. El cliente WASM llama a este punto final a través de HttpClient y muestra el resultado.

¿Cómo activo una descarga de PDF en Blazor?

Inyecta IJSRuntime en tu componente, genera bytes de PDF con IronPDF, envuélvelos en un DotNetStreamReference, y llama a una función de JavaScript usando InvokeVoidAsync. La función de JavaScript crea una URL de Blob y hace clic en un elemento ancla para activar la descarga del navegador.

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

IronPDF utiliza un motor de renderización de Chrome que convierte de manera precisa la salida de HTML, CSS y JavaScript en formato PDF. Soporta .NET 10, funciona en arquitecturas de Blazor Server y WebAssembly, y proporciona una única API para generación de PDFs, fusión, anotaciones, protección con contraseña y procesamiento de carga de usuario.

¿Cómo agrego encabezados y pies de página a un PDF generado en Blazor?

Configura la propiedad RenderingOptions en ChromePdfRenderer antes de llamar a un método de renderización. Usa TextHeader y TextFooter para encabezados y pies de página de texto plano con variables de plantilla como {page}, {total-pages}, y {date}. Para diseños basados en HTML, usa HtmlHeader y HtmlFooter en su lugar.

¿Cómo fusiono múltiples documentos PDF en Blazor?

Genera cada documento como una instancia de PdfDocument usando ChromePdfRenderer, luego llama a PdfDocument.Merge(pdf1, pdf2) para combinarlos. Pasa los BinaryData del documento combinado al URI de datos base64 de tu componente Blazor para mostrar el resultado combinado.

¿Puedo mostrar un PDF subido por el usuario en Blazor sin guardarlo en el disco?

Sí. Usa el componente InputFile de Blazor para leer el archivo subido en un MemoryStream, convierte los bytes a un URI de datos base64, y asígnalo al atributo src de un iframe. No se requiere escritura en el sistema de archivos. Para el procesamiento del lado del servidor, carga los bytes en una instancia de PdfDocument antes de codificarlos.

¿Cómo aplico protección con contraseña a un PDF generado en Blazor?

Después de generar el PdfDocument, configura la propiedad Password para la contraseña de apertura de usuario y usa SecuritySettings.OwnerPassword para la contraseña del propietario. Usa SecuritySettings.AllowUserPrinting y AllowUserCopyPasteContent para controlar los permisos antes de guardar o codificar el documento.

¿IronPDF es compatible con .NET 10 para proyectos de visor de PDF de Blazor?

Sí. IronPDF soporta .NET 10, .NET 9, .NET 8, .NET 6, y .NET Framework 4.6.2 y posteriores. No se requiere configuración especial para usar IronPDF en una aplicación de Blazor orientada a .NET 10.

Curtis Chau
Curtis Chau
  Chatea con el equipo de ingeniería ahora
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

Artículos Relacionados

Prueba de 30 días → Producto completo. Sin límites. Sin tarjeta. Prueba gratis

Iron Support Team

We're online 24 hours, 5 days a week.
Chat
Email
Call Me