¿Qué requisitos previos necesito para mi proyecto Blazor ?

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 de IronPDF en Program.cs para habilitar la funcionalidad completa:

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

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

License.LicenseKey = "YOUR-LICENSE-KEY"

Necesitará aplicar una clave de licencia para desbloquear todas las funciones. IronPDF funciona a la perfección con las aplicaciones de Blazor Server , proporcionando sólidas capacidades de generación de PDF para aplicaciones web modernas. Si eres nuevo en IronPDF, consulta la guía de inicio rápido para familiarizarte con los conceptos básicos.

¿Por qué Blazor no puede abrir archivos PDF directamente en nuevas pestañas?

Las aplicaciones de Blazor Server no pueden manipular directamente las pestañas del navegador desde el código C# en el servidor. Abrir un PDF en una nueva pestaña desde Blazor requiere interoperabilidad de JavaScript (interoperabilidad JS) para unir la generación de PDF del lado del servidor con la administració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 resuelve un problema común de límite entre cliente y servidor en aplicaciones .NET . El motor de renderizado Chrome de la biblioteca garantiza una conversión de HTML a PDF con precisión de píxeles , manteniendo la integridad visual de sus documentos.

Al trabajar con Blazor y IronPDF , es importante comprender que la ejecución de JavaScript ocurre en el lado del cliente, mientras que la generación de PDF ocurre en el servidor. Esta separación requiere el uso de interoperabilidad de JavaScript para tareas de gestión de ventanas.

¿Cómo implemento funciones de JavaScript en mi aplicación web Blazor ?

Agregue este código JavaScript a su archivo _Host.cshtml para manejar la visualización de PDF en nuevas pestañas del navegador. Este módulo administra las operaciones de la ventana 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 de JavaScript window.openPdfInNewTab es crucial para 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 enfoque es similar a la conversión de PDF a Base64 pero a la inversa, lo que permite que el navegador muestre el contenido del PDF.

Luego, este blob se utiliza para crear una URL temporal, que finalmente se pasa a window.open(blobUrl, '_blank') para obligar al navegador a abrir el PDF en una nueva pestaña. La técnica de URL de blob se utiliza comúnmente cuando se cargan archivos PDF desde la memoria sin necesidad de almacenamiento de archivos del lado del servidor.

Para las aplicaciones que requieren mayor seguridad, considere implementar permisos y contraseñas de PDF antes de transmitir el documento al cliente. También puede explorar las firmas digitales para garantizar la autenticidad del documento.

¿Cómo creo el 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>
    <input @bind="targetUrl" class="form-control" />
</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 = "___PROTECTED_URL_69___";
    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 ChromePdfRenderer para generar el PDF a partir de la URL proporcionada por el usuario. Las opciones de renderizado le permiten personalizar los márgenes , habilitar el renderizado de JavaScript y establecer retrasos de renderizado para contenido dinámico.

Luego convierte la matriz de bytes PDF resultante en una cadena Base64 y usa @inject IJSRuntime JS para llamar a la función JavaScript , abriendo el documento para el usuario. Este patrón es particularmente útil al convertir URL a PDF en aplicaciones web. Para escenarios más complejos, es posible que desees implementar la generación de PDF asincrónica para obtener un mejor rendimiento.

Considere implementar un registro personalizado para rastrear las actividades de generación de PDF y solucionar problemas. También puede agregar marcas de agua o encabezados y pies de página para mejorar sus PDF.

¿Cómo trabajo con contenido HTML dinámico?

Para generar archivos PDF a partir de contenido dinámico en lugar de URL, modifique su enfoque para utilizar 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; }}
                table {{ border-collapse: collapse; width: 100%; }}
                th, td {{ border: 1px solid #ddd; padding: 8px; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </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; }}
                table {{ border-collapse: collapse; width: 100%; }}
                th, td {{ border: 1px solid #ddd; padding: 8px; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </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 Function GenerateFromHtml() As Task
    ' Define CSS styles inside the HTML string for structure and appearance.
    Dim htmlContent As String = $"
        <!DOCTYPE html>
        <html>
        <head>
            <style>
                body {{ font-family: Arial; padding: 20px; }}
                h1 {{ color: #2c3e50; }}
                table {{ border-collapse: collapse; width: 100%; }}
                th, td {{ border: 1px solid #ddd; padding: 8px; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </body>
        </html>"
    Dim renderer = New ChromePdfRenderer()
    Dim pdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
    Dim pdfBytes As Byte() = pdfDocument.BinaryData
    Await JS.InvokeVoidAsync("openPdfInNewTab", Convert.ToBase64String(pdfBytes), "dynamic.pdf")
End Function

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. El método RenderHtmlAsPdf maneja la conversión sin problemas. Este enfoque es perfecto para crear informes PDF con datos dinámicos de bases de datos o API.

Puede mejorar su contenido HTML con fuentes personalizadas , CSS responsivo e incluso imágenes incrustadas mediante DataURIs . Para diseños complejos, considere usar Bootstrap y Flexbox para garantizar una representación consistente.

Al trabajar con idiomas internacionales , IronPDF ofrece una excelente compatibilidad con Unicode para garantizar la correcta representación de caracteres en diferentes idiomas y escrituras. También puede controlar los saltos de página e implementar tamaños de papel personalizados para requisitos específicos de los documentos.

¿Qué problemas comunes debo abordar?

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
private readonly IMemoryCache _cache;

public async Task<byte[]> GetCachedPdf(string cacheKey)
{
    if (!_cache.TryGetValue(cacheKey, out byte[] pdfBytes))
    {
        // Generate PDF
        var renderer = new ChromePdfRenderer();
        var pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___");
        pdfBytes = pdf.BinaryData;

        // Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10));
    }
    return pdfBytes;
}

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
private readonly IMemoryCache _cache;

public async Task<byte[]> GetCachedPdf(string cacheKey)
{
    if (!_cache.TryGetValue(cacheKey, out byte[] pdfBytes))
    {
        // Generate PDF
        var renderer = new ChromePdfRenderer();
        var pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___");
        pdfBytes = pdf.BinaryData;

        // Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10));
    }
    return pdfBytes;
}

Imports System
Imports System.Threading.Tasks
Imports Microsoft.Extensions.Caching.Memory

' Cache generated PDFs to avoid regeneration
Private ReadOnly _cache As IMemoryCache

Public Async Function GetCachedPdf(cacheKey As String) As Task(Of Byte())
    Dim pdfBytes As Byte() = Nothing
    If Not _cache.TryGetValue(cacheKey, pdfBytes) Then
        ' Generate PDF
        Dim renderer As New ChromePdfRenderer()
        Dim pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___")
        pdfBytes = pdf.BinaryData

        ' Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10))
    End If
    Return pdfBytes
End Function

¿Qué alternativas de navegación puedo utilizar?

Además de la interoperabilidad de JavaScript , puede servir archivos PDF a través de middleware de archivos estáticos y usar etiquetas de anclaje HTML estándar para 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. Para escenarios más avanzados, considere implementar un componente de visualización de PDF dedicado o usar MemoryStream para servir archivos PDF sin guardarlos en el disco.

También puede explorar la posibilidad de guardar archivos PDF en un almacenamiento en la nube como Azure Blob Storage para lograr una mejor escalabilidad. Para las aplicaciones que requieren acceso sin conexión, considere implementar la funcionalidad de descarga de PDF junto con la función de nueva pestaña.

¿Qué mejores prácticas debo seguir?

1. Manejo de errores: envuelva la generación de PDF en bloques try-catch con mensajes de error significativos. Realice un seguimiento de los problemas mediante el registro de errores personalizado .

2. Rendimiento: utilice async/await para evitar el bloqueo de la interfaz de usuario. Implementar retrasos de renderizado para páginas con mucho uso de JavaScript. Precaliente el motor para obtener renderizados iniciales más rápidos .

3. Experiencia del usuario: Mostrar indicadores de carga y manejar bloqueadores de ventanas emergentes con elegancia. Seguimiento del progreso de archivos PDF de varias páginas . Proporcionar comentarios claros sobre los problemas de la red .

4. Manipulación del DOM: recuerde que C# del lado del servidor no puede manipular directamente el DOM del cliente. Utilice escuchas de mensajes JavaScript para interacciones complejas.

5. Seguridad: valide todas las entradas del usuario antes de generar el PDF. Aplique desinfección de PDF , firmas digitales y cifrado según sea necesario. Utilice HTTPS para una transmisión segura .

6. Gestión de recursos: elimine los documentos PDF de forma adecuada y evite fugas de memoria . Supervise el tamaño del paquete para implementaciones en contenedores optimizadas.

Conclusión

La combinación de las potentes capacidades de generación de PDF de IronPDF con la interoperabilidad de JavaScript de Blazor proporciona una solución sólida para abrir archivos 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 Blazor modernas. Ya sea que esté convirtiendo HTML a PDF , creando formularios u organizando documentos complejos , IronPDF proporciona las herramientas necesarias para el manejo de PDF de nivel empresarial.

¿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. Para implementaciones de producción, explore nuestras opciones de licencia y guías de implementación para varias plataformas, incluidas Windows , Linux y Azure .