Blazor Abrir PDF en una nueva pestaña con IronPDF: Un tutorial para desarrolladores

Requisitos y Instalación

Comienza creando un nuevo proyecto de Blazor Server en Visual Studio 2022. Instala IronPDF a través de la Consola del Administrador de Paquetes NuGet:

Install-Package IronPdf

Configure su licencia IronPDF en Program.cs para habilitar la funcionalidad completa:

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

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

Entendiendo el reto

Las aplicaciones de Blazor Server no pueden manipular directamente las pestañas del navegador desde el código C# en el servidor. La tarea de Blazor open PDF in new tab requiere JavaScript InterOp (JS interop) para unir la generación de PDF del lado del servidor con la gestión de ventanas del lado del cliente.

IronPDF permite a los desarrolladores generar documentos PDF de alta calidad en el servidor, que pueden mostrarse mediante la función window.open() de JavaScript. Se trata de resolver un problema común cliente-servidor en una aplicación .NET.

Implementación de funciones JavaScript en su aplicación web Blazor

Añada este código JavaScript a su archivo _Host.cshtml para gestionar la visualización del PDF en nuevas pestañas del navegador. Este es el módulo responsable de la gestión de ventanas del lado del cliente:

<script>
    window.openPdfInNewTab = function (pdfData, fileName) {
        // Convert base64 to blob
        const byteCharacters = atob(pdfData);
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        // The type is 'application/pdf', not 'image/png' or 'image/jpg'
        const blob = new Blob([byteArray], { type: 'application/pdf' });
        // Create URL and open in new tab
        const blobUrl = URL.createObjectURL(blob);
        const newWindow = window.open(blobUrl, '_blank');
        if (newWindow) {
            newWindow.document.title = fileName || 'PDF Document';
        }
        // Clean up
        setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
        return newWindow !== null;
    };
</script>

<script>
    window.openPdfInNewTab = function (pdfData, fileName) {
        // Convert base64 to blob
        const byteCharacters = atob(pdfData);
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        // The type is 'application/pdf', not 'image/png' or 'image/jpg'
        const blob = new Blob([byteArray], { type: 'application/pdf' });
        // Create URL and open in new tab
        const blobUrl = URL.createObjectURL(blob);
        const newWindow = window.open(blobUrl, '_blank');
        if (newWindow) {
            newWindow.document.title = fileName || 'PDF Document';
        }
        // Clean up
        setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
        return newWindow !== null;
    };
</script>

La función JavaScript window.openPdfInNewTab es crucial para resolver el desafío de abrir una nueva pestaña desde el servidor. Acepta los datos PDF como una cadena Base64 del servidor Blazor y el código del lado del cliente los convierte en un objeto Blob binario.

Este blob se utiliza para crear una URL temporal, que finalmente se pasa a window.open(blobUrl, '_blank') para forzar al navegador a abrir el PDF en una nueva pestaña.

Creación del componente Blazor

Crea un nuevo componente Razor que genere PDFs y los abra en nuevas pestañas. Esto sirve como la plantilla principal para la solución:

@page "/pdf-viewer"
@using IronPDF @inject IJSRuntime JS
<h3>Open PDF in New Tab</h3>
<div class="mb-3">
    <label>Enter URL:</label>
</div>
<button class="btn btn-primary" @onclick="GenerateAndOpenPdf"
        disabled="@isProcessing">
    @if (isProcessing)
    {
        <span>Generating PDF...</span>
    }
    else
    {
        <span>Generate and Open PDF</span>
    }
</button>
@if (!string.IsNullOrEmpty(errorMessage))
{
    <div class="alert alert-danger mt-3">@errorMessage</div>
}
@code {
    private string targetUrl = "https://ironpdf.com";
    private bool isProcessing = false;
    private string errorMessage = "";
    private async Task GenerateAndOpenPdf()
    {
        isProcessing = true;
        errorMessage = "";
        try
        {
            // Configure Chrome PDF renderer. Note the rendering details
            var renderer = new ChromePdfRenderer
            {
                RenderingOptions = new ChromePdfRenderOptions
                {
                    MarginTop = 10,
                    MarginBottom = 10,
                    MarginLeft = 10,
                    MarginRight = 10,
                    EnableJavaScript = true,
                    RenderDelay = 500
                }
            };
            // Generate PDF from URL
            var pdfDocument = await Task.Run(() =>
                renderer.RenderUrlAsPdf(targetUrl));
            // Convert to base64
            byte[] pdfBytes = pdfDocument.BinaryData;
            string base64Pdf = Convert.ToBase64String(pdfBytes);
            // Open in new tab via JS interop. We run this call to open the PDF
            bool success = await JS.InvokeAsync<bool>("openPdfInNewTab",
                base64Pdf, $"Document_{DateTime.Now:yyyyMMdd_HHmmss}.pdf");
            if (!success)
            {
                // Giving the user an understandable error is key
                errorMessage = "Pop-up blocked. Please allow pop-ups for this site.";
            }
        }
        catch (Exception ex)
        {
            errorMessage = $"Error: {ex.Message}";
        }
        finally
        {
            isProcessing = false;
        }
    }
}

@page "/pdf-viewer"
@using IronPDF @inject IJSRuntime JS
<h3>Open PDF in New Tab</h3>
<div class="mb-3">
    <label>Enter URL:</label>
</div>
<button class="btn btn-primary" @onclick="GenerateAndOpenPdf"
        disabled="@isProcessing">
    @if (isProcessing)
    {
        <span>Generating PDF...</span>
    }
    else
    {
        <span>Generate and Open PDF</span>
    }
</button>
@if (!string.IsNullOrEmpty(errorMessage))
{
    <div class="alert alert-danger mt-3">@errorMessage</div>
}
@code {
    private string targetUrl = "https://ironpdf.com";
    private bool isProcessing = false;
    private string errorMessage = "";
    private async Task GenerateAndOpenPdf()
    {
        isProcessing = true;
        errorMessage = "";
        try
        {
            // Configure Chrome PDF renderer. Note the rendering details
            var renderer = new ChromePdfRenderer
            {
                RenderingOptions = new ChromePdfRenderOptions
                {
                    MarginTop = 10,
                    MarginBottom = 10,
                    MarginLeft = 10,
                    MarginRight = 10,
                    EnableJavaScript = true,
                    RenderDelay = 500
                }
            };
            // Generate PDF from URL
            var pdfDocument = await Task.Run(() =>
                renderer.RenderUrlAsPdf(targetUrl));
            // Convert to base64
            byte[] pdfBytes = pdfDocument.BinaryData;
            string base64Pdf = Convert.ToBase64String(pdfBytes);
            // Open in new tab via JS interop. We run this call to open the PDF
            bool success = await JS.InvokeAsync<bool>("openPdfInNewTab",
                base64Pdf, $"Document_{DateTime.Now:yyyyMMdd_HHmmss}.pdf");
            if (!success)
            {
                // Giving the user an understandable error is key
                errorMessage = "Pop-up blocked. Please allow pop-ups for this site.";
            }
        }
        catch (Exception ex)
        {
            errorMessage = $"Error: {ex.Message}";
        }
        finally
        {
            isProcessing = false;
        }
    }
}

Este bloque de código define la página interactiva principal. El marcado Razor crea una interfaz de usuario simple con un campo de entrada de URL y un botón. El bloque @code de C# se encarga de la lógica: cuando se hace clic en el botón, utiliza una instancia de ChromePdfRenderer para generar el PDF a partir de la URL proporcionada por el usuario.

A continuación, convierte la matriz de bytes PDF resultante en una cadena Base64 y utiliza @inject IJSRuntime JS para llamar a la función JavaScript, abriendo el documento para el usuario.

Trabajar con contenido HTML dinámico

Para generar PDFs a partir de contenido dinámico en lugar de URLs, modifica tu enfoque para usar RenderHtmlAsPdf:

private async Task GenerateFromHtml()
{
    // Define CSS styles inside the HTML string for structure and appearance.
    string htmlContent = $@"
        <!DOCTYPE html>
        <html>
        <head>
            <style>
                body {{ font-family: Arial; padding: 20px; }}
                h1 {{ color: #2c3e50; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <div>Generated: {DateTime.Now}</div>
        </body>
        </html>";
    var renderer = new ChromePdfRenderer();
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    byte[] pdfBytes = pdfDocument.BinaryData;
    await JS.InvokeVoidAsync("openPdfInNewTab",
        Convert.ToBase64String(pdfBytes), "dynamic.pdf");
}

private async Task GenerateFromHtml()
{
    // Define CSS styles inside the HTML string for structure and appearance.
    string htmlContent = $@"
        <!DOCTYPE html>
        <html>
        <head>
            <style>
                body {{ font-family: Arial; padding: 20px; }}
                h1 {{ color: #2c3e50; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <div>Generated: {DateTime.Now}</div>
        </body>
        </html>";
    var renderer = new ChromePdfRenderer();
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    byte[] pdfBytes = pdfDocument.BinaryData;
    await JS.InvokeVoidAsync("openPdfInNewTab",
        Convert.ToBase64String(pdfBytes), "dynamic.pdf");
}

El método GenerateFromHtml demuestra cómo IronPDF puede generar un PDF a partir de un marcado HTML generado dinámicamente en lugar de una URL existente. Construye una cadena de HTML completa que contiene un encabezado, contenido y datos dinámicos. La respuesta para la generación de contenido dinámico es el método RenderHtmlAsPdf.

Cómo resolver problemas comunes

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration

Alternativas de navegación

Además de la interoperabilidad con JavaScript, puede servir archivos PDF a través de un middleware de archivos estáticos y utilizar etiquetas de anclaje HTML estándar para una opción de navegación alternativa:

<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>

<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>

Este enfoque funciona bien para PDF pregenerados, pero carece de las capacidades de generación dinámica del método JS InterOp.

Mejores prácticas

1. Manejo de errores: Envuelva siempre la generación de PDF en bloques try-catch y proporcione mensajes de error significativos a los usuarios cuando se produzca un problema.
2. Rendimiento: Utilice patrones async/await para evitar el bloqueo de la interfaz de usuario durante la generación de PDF.
3. Experiencia del usuario: Muestra indicadores de carga durante la generación y maneja los escenarios de bloqueadores de ventanas emergentes de manera adecuada.
4. manipulación DOM: Recuerde que C# en el servidor no puede manipular directamente el DOM del cliente; por eso JS InterOp es esencial. No necesitas establecer manualmente la altura o el ancho de la nueva ventana, ya que el navegador maneja al visor de PDF.
5. Seguridad: validar y desinfectar la entrada del usuario antes de generar archivos PDF

Conclusión

La combinación de las potentes capacidades de generación de PDF de IronPDF con JavaScript InterOp de Blazor proporciona una solución sólida para abrir PDF en nuevas pestañas del navegador. Este enfoque permite a los desarrolladores crear documentos PDF dinámicos y profesionales que se integran perfectamente con las aplicaciones modernas de Blazor construidas sobre la tecnología .NET de Microsoft.

¿Listo para implementar la funcionalidad de PDF en tu proyecto de Blazor? Inicie su prueba gratuita de IronPDF hoy mismo. La prueba incluye funcionalidad completa sin marcas de agua y soporte integral para asegurar tu éxito.