Cómo abrir un PDF en una nueva pestaña en Blazor

Requisitos previos y configuració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

Configura tu licencia IronPDF en Program.cs para habilitar la funcionalidad completa:

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

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 de abrir un PDF en una nueva pestaña 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 luego pueden mostrarse utilizando la funcionalidad window.open() de JavaScript. Este enfoque significa resolver un problema común cliente-servidor en una aplicación .NET.

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

Añade este código JavaScript a tu archivo _Host.cshtml para manejar la visualización de 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 binario Blob.

Este blob se utiliza luego 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
            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 C# @code maneja la lógica: cuando se hace clic en el botón, utiliza una instancia de ChromePdfRenderer para generar el PDF desde la URL proporcionada por el usuario.

Luego convierte el arreglo de bytes resultante del PDF 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");
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

El método GenerateFromHtml demuestra cómo IronPDF puede generar un PDF a partir de marcas HTML generadas dinámicamente en lugar de una URL existente. Construye una cadena de HTML completa que contiene un encabezado, contenido y datos dinámicos. La solución 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

IRON VB CONVERTER ERROR developers@ironsoftware.com

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 de interoperabilidad JS.

Mejores prácticas

1. Manejo de errores: Siempre envuelve la generación de PDFs en bloques try-catch y proporciona mensajes de error significativos a los usuarios cuando ocurre un problema.

2. Rendimiento: Utiliza patrones async/await para prevenir el bloqueo de la interfaz de usuario durante la generación de PDFs.

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 del DOM: Recuerda que C# en el servidor no puede manipular el DOM del cliente directamente; por eso es esencial la interoperabilidad con JS. No necesitas establecer manualmente la altura o el ancho de la nueva ventana, ya que el navegador maneja al visor de PDF.

5. Seguridad: Valida y sanitiza la entrada del usuario antes de generar PDFs.

Conclusión

La combinación de las potentes capacidades de generación de PDF de IronPDF con la interoperabilidad JavaScript 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? Comience su prueba gratuita de IronPDF hoy mismo. La prueba incluye funcionalidad completa sin marcas de agua y soporte integral para asegurar tu éxito.