Telerik Blazor PDF Viewer con IronPDF: VERI*FACTU y Facturae en España

¿Por qué combinar Telerik UI con IronPDF para aplicaciones Blazor en España?

El visor de PDF Telerik Blazor destaca en la visualización de PDF con funciones como la búsqueda de texto, los controles de zoom y una barra de herramientas personalizable. Sin embargo, cuando necesita generar archivos PDF dinámicamente desde HTML, URL o vistas Razor — incluyendo facturas electrónicas Facturae 3.2.2, documentos VERI*FACTU para la AEAT, o PDFs con firma digital PAdES conforme a eIDAS — IronPDF proporciona el motor de renderizado basado en Chrome que Telerik UI no incluye en sus bibliotecas de procesamiento de documentos.

Para empresas españolas, la combinación resulta especialmente relevante: IronPDF genera la representación visual del documento fiscal (con NIF del emisor B-28.456.789, CIF del receptor A-12.345.678, importes en euros con IVA 21%, referencia VERI*FACTU y código QR AEAT), mientras que Telerik ofrece al usuario final una interfaz de visualización profesional con controles de búsqueda, navegación y descarga. La LOPDGDD y las directrices de la AEPD exigen que los datos personales incluidos en los PDFs estén adecuadamente protegidos; IronPDF permite aplicar cifrado y restricciones de permisos antes de pasar el documento al visor. El motor de renderizado Chrome de IronPDF garantiza una precisión de píxeles perfecta al convertir contenido web a PDF.

Este enfoque híbrido le permite utilizar las capacidades superiores de creación de PDF de IronPDF mientras utiliza los componentes de interfaz de usuario refinados de Telerik para la visualización. Funciona particularmente bien al modernizar proyectos web heredados o crear nuevas soluciones Blazor PDF que requieren funciones de generación y visualización. También puede agregar encabezados y pies de página , aplicar marcas de agua y establecer márgenes personalizados a los PDF generados antes de mostrarlos.

¿Cómo se instala y configura el proyecto?

Para configurar ambas bibliotecas en su proyecto Blazor es necesario instalar los paquetes NuGet necesarios. Puede utilizar la Consola del Administrador de paquetes o la CLI de .NET . IronPDF está disponible en NuGet.org y funciona con .NET 10 y versiones posteriores. Para obtener más detalles, consulte la guía de instalación de IronPDF NuGet.

Install-Package IronPdf
dotnet add package IronPdf

Install-Package IronPdf
dotnet add package IronPdf

Tras la instalación, configure su Program.cs para añadir servicios:

builder.Services.AddTelerikBlazor();
builder.Services.AddSingleton<ChromePdfRenderer>();

builder.Services.AddTelerikBlazor();
builder.Services.AddSingleton<ChromePdfRenderer>();

Esta configuración habilita tanto los componentes de Telerik UI para Blazor como las capacidades de renderizado de IronPDF en su aplicación. los usuarios de la suite DevCraft que ya estén familiarizados con Telerik encontrarán esta integración sencilla. Para escenarios más complejos, es posible que desee explorar la generación de PDF asincrónica o configuraciones de registro personalizadas.

¿Cómo crear documentos PDF con IronPDF para su visualización en el contexto de la facturación española?

IronPDF transforma el contenido HTML en archivos PDF que el visor de PDF Telerik puede mostrar. Para el mercado español, esto incluye la generación de facturas electrónicas con los campos obligatorios de VERI*FACTU y Facturae, que luego se muestran en el visor Telerik para revisión antes de la transmisión al FACe (Punto General de Entrada de Facturas Electrónicas) o al SII de la AEAT. A continuación se explica cómo generar un PDF a partir de HTML y prepararlo para su visualización. También puede convertir cadenas HTML a PDF o renderizar archivos HTML directamente:

@page "/generate-pdf"
@inject ChromePdfRenderer Renderer
@code {
    private byte[] pdfData;
    private async Task GeneratePDF()
    {
        // Create PDF from HTML content - Spain Facturae/VERI*FACTU compatible
        var pdf = await Renderer.RenderHtmlAsPdfAsync(@"
            <h2>FACTURA FAC-2026-00501</h2>
            <p>Emisor: Servicios Web Ibéricos, S.L. | NIF: B-28.456.789</p>
            <p>Receptor: Comercial Norte, S.A. | CIF: A-12.345.678</p>
            <table>
                <tr><th>Concepto</th><th>Base (€)</th><th>IVA 21%</th><th>Total (€)</th></tr>
                <tr><td>Consultoría Blazor</td><td>800,00</td><td>168,00</td><td>968,00</td></tr>
            </table>
            <p>Ref. VERI*FACTU AEAT: FAC-2026-00501-ES | Cert. FNMT-RCM</p>");
        // Convert to byte array for Telerik viewer
        pdfData = pdf.BinaryData;
    }
}

@page "/generate-pdf"
@inject ChromePdfRenderer Renderer
@code {
    private byte[] pdfData;
    private async Task GeneratePDF()
    {
        // Create PDF from HTML content - Spain Facturae/VERI*FACTU compatible
        var pdf = await Renderer.RenderHtmlAsPdfAsync(@"
            <h2>FACTURA FAC-2026-00501</h2>
            <p>Emisor: Servicios Web Ibéricos, S.L. | NIF: B-28.456.789</p>
            <p>Receptor: Comercial Norte, S.A. | CIF: A-12.345.678</p>
            <table>
                <tr><th>Concepto</th><th>Base (€)</th><th>IVA 21%</th><th>Total (€)</th></tr>
                <tr><td>Consultoría Blazor</td><td>800,00</td><td>168,00</td><td>968,00</td></tr>
            </table>
            <p>Ref. VERI*FACTU AEAT: FAC-2026-00501-ES | Cert. FNMT-RCM</p>");
        // Convert to byte array for Telerik viewer
        pdfData = pdf.BinaryData;
    }
}

Este código genera un documento PDF listo para mostrarse. El motor de renderizado de IronPDF garantiza que su contenido HTML, CSS y JavaScript se represente perfectamente, manteniendo todo el formato cuando los usuarios lo ven a través del componente visor de PDF. También puede agregar imágenes a archivos PDF, incrustar imágenes desde Azure Blob Storage o convertir imágenes a PDF directamente. Explore la gama completa de funciones de IronPDF para comprender lo que es posible.

La clase ChromePdfRenderer ofrece amplias opciones de personalización. Puede configurar el tamaño de página, los márgenes, los encabezados, los pies de página y definir CSS personalizado para medios impresos: características que complementan las capacidades de visualización de Telerik. Para escenarios avanzados, explore el control de salto de página, la configuración de la ventana gráfica o la configuración de URL base para una carga adecuada de los activos.

¿Cómo se integra el componente Blazor del visor de PDF de Telerik?

Una vez que haya generado su PDF con IronPDF, mostrarlo con el visor de PDF Telerik Blazor es sencillo:

<TelerikPdfViewer Data="@pdfData"
                  Height="600px"
                  Zoom="1.0">
    <PdfViewerToolBar>
        <PdfViewerToolBarPagerTool />
        <PdfViewerToolBarZoomTool />
        <PdfViewerToolBarSearchTool />
        <PdfViewerToolBarDownloadTool />
    </PdfViewerToolBar>
</TelerikPdfViewer>

<TelerikPdfViewer Data="@pdfData"
                  Height="600px"
                  Zoom="1.0">
    <PdfViewerToolBar>
        <PdfViewerToolBarPagerTool />
        <PdfViewerToolBarZoomTool />
        <PdfViewerToolBarSearchTool />
        <PdfViewerToolBarDownloadTool />
    </PdfViewerToolBar>
</TelerikPdfViewer>

Esta configuración de componentes proporciona herramientas esenciales para interactuar con archivos PDF. La barra de herramientas incluye botones de navegación, controles de nivel de zoom y funciones de búsqueda. Puede personalizar qué herramientas aparecen en función de las necesidades de su aplicación. El atributo Data proporciona el valor PDF que debe mostrarse. Para mejorar la funcionalidad, es posible que desees implementar capacidades de extracción de texto o de búsqueda de PDF.

El visor de Telerik UI para Blazor gestiona automáticamente la compatibilidad con los navegadores y funciona en todos los navegadores modernos sin plugins. Para las aplicaciones de escritorio que utilizan .NET MAUI, ambas bibliotecas admiten la implementación multiplataforma, lo que le permite crear experiencias PDF coherentes en plataformas web y de escritorio.

¿Cómo funcionan juntos estos componentes?

La integración crea un flujo de trabajo eficaz donde IronPDF se encarga del trabajo pesado de la creación de PDF mientras Telerik proporciona una experiencia de visualización refinada. A continuación se muestra un ejemplo completo que demuestra la creación de archivos PDF a partir de HTML con contenido dinámico:

@page "/document-viewer"
@inject ChromePdfRenderer Renderer
<div class="row">
    <div class="col-md-12">
        <TelerikButton OnClick="@LoadDocument">
            Load PDF Document
        </TelerikButton>
        @if (documentData != null)
        {
            <TelerikPdfViewer Data="@documentData"
                            Height="800px">
            </TelerikPdfViewer>
        }
    </div>
</div>
@code {
    private byte[] documentData;
    private async Task LoadDocument()
    {
        // Generate dynamic PDF content
        var html = await GenerateReportHtml();
        var pdf = await Renderer.RenderHtmlAsPdfAsync(html);
        documentData = pdf.BinaryData;
    }
    private async Task<string> GenerateReportHtml()
    {
        // Build HTML dynamically
        return "<h1>Dynamic Report</h1><p>Report content here</p>";
    }
}

@page "/document-viewer"
@inject ChromePdfRenderer Renderer
<div class="row">
    <div class="col-md-12">
        <TelerikButton OnClick="@LoadDocument">
            Load PDF Document
        </TelerikButton>
        @if (documentData != null)
        {
            <TelerikPdfViewer Data="@documentData"
                            Height="800px">
            </TelerikPdfViewer>
        }
    </div>
</div>
@code {
    private byte[] documentData;
    private async Task LoadDocument()
    {
        // Generate dynamic PDF content
        var html = await GenerateReportHtml();
        var pdf = await Renderer.RenderHtmlAsPdfAsync(html);
        documentData = pdf.BinaryData;
    }
    private async Task<string> GenerateReportHtml()
    {
        // Build HTML dynamically
        return "<h1>Dynamic Report</h1><p>Report content here</p>";
    }
}

@page "/document-viewer"
@inject ChromePdfRenderer Renderer
<div class="row">
    <div class="col-md-12">
        <TelerikButton OnClick="@LoadDocument">
            Load PDF Document
        </TelerikButton>
        @If documentData IsNot Nothing Then
            <TelerikPdfViewer Data="@documentData"
                              Height="800px">
            </TelerikPdfViewer>
        End If
    </div>
</div>
@code
    Private documentData As Byte()
    
    Private Async Function LoadDocument() As Task
        ' Generate dynamic PDF content
        Dim html = Await GenerateReportHtml()
        Dim pdf = Await Renderer.RenderHtmlAsPdfAsync(html)
        documentData = pdf.BinaryData
    End Function

    Private Async Function GenerateReportHtml() As Task(Of String)
        ' Build HTML dynamically
        Return "<h1>Dynamic Report</h1><p>Report content here</p>"
    End Function
End Code

¿Por qué elegir este enfoque híbrido para proyectos de facturación electrónica en España?

Si bien Telerik UI para Blazor ofrece excelentes capacidades de visualización, no iguala la potencia de generación de PDF de IronPDF para el entorno normativo español. El sistema VERI*FACTU de la AEAT, el esquema Facturae para el FACe, los sistemas TicketBAI en los territorios forales del País Vasco (Bizkaia, Gipuzkoa, Araba) y NaTicket en Navarra, y los requisitos de firma PAdES bajo eIDAS con certificados FNMT-RCM exigen un motor de renderizado PDF capaz de manejar HTML complejo con campos específicos de facturación española. El motor basado en Chrome de IronPDF genera diseños, formularios y contenido con estilos complejos con los que las bibliotecas de procesamiento de documentos más simples pueden tener dificultades. Al combinar ambos, obtendrá una generación de PDF profesional junto con una interfaz de visualización profesional.

Este enfoque proporciona flexibilidad a los desarrolladores que necesitan explorar diferentes opciones de visualización. Se podría sustituir el visor de Telerik por un visor iframe más sencillo o desarrollar componentes de visualización personalizados manteniendo las capacidades de generación de IronPDF. La solución se adapta bien a conversiones simples de HTML a PDF y escenarios de generación de informes complejos. La página de inicio de IronPDF proporciona una descripción general de todos los casos de uso admitidos.

Flujo de trabajo Blazor para facturación electrónica española con Telerik y IronPDF

La combinación Telerik UI + IronPDF resulta especialmente efectiva para construir aplicaciones Blazor de facturación electrónica en España. El flujo de trabajo típico es el siguiente:

1. El usuario introduce los datos de la factura en un formulario Blazor con Telerik UI: NIF del emisor (B-28.456.789), CIF del receptor (A-12.345.678), líneas de detalle con base imponible e IVA al 21%.

2. IronPDF genera el PDF de la factura en el servidor, incluyendo el código QR VERI*FACTU de la AEAT y la referencia al certificado FNMT-RCM para la firma digital PAdES. Para TicketBAI (Bizkaia, Gipuzkoa, Araba) y NaTicket (Navarra), el HTML incluye el código QR TBai y la cadena de identificación única.

3. El visor TelerikPdfViewer muestra el PDF para que el usuario lo revise antes de emitir. Puede usar los controles de búsqueda para localizar campos como el NIF o el número de factura, y los controles de zoom para verificar la legibilidad del código QR.

4. El usuario confirma y la aplicación transmite el XML Facturae 3.2.2 firmado (XAdES-BES) al FACe, o el registro VERI*FACTU a la AEAT por API REST. Para documentos que contienen datos personales (nombre del receptor, dirección, datos bancarios), el sistema aplica el cifrado y las restricciones de IronPDF conforme a la LOPDGDD y las directrices de la AEPD.

Este flujo puede extenderse para gestionar el SII (Suministro Inmediato de Información), que obliga a las grandes empresas a transmitir los registros de facturación a la AEAT dentro de los cuatro días hábiles siguientes a la emisión. La generación asíncrona de PDF con IronPDF permite procesar lotes de facturas en paralelo sin bloquear la interfaz Blazor.

¿Cuáles son los próximos pasos para la implementación?

Crear un visor de PDF de Telerik Blazor con IronPDF le ofrece lo mejor de ambos mundos: generación de PDF efectiva y experiencias de visualización pulidas. Esta combinación le ayuda a crear soluciones PDF completas que pueden modernizar proyectos web heredados y cumplir con los requisitos de las aplicaciones modernas. Ya sea que se implementen en Windows, Linux o macOS, ambas bibliotecas brindan soporte multiplataforma.

Ya sea que esté creando sistemas de gestión de documentos, herramientas de informes o cualquier aplicación Blazor que necesite capacidades PDF, esta integración proporciona la funcionalidad y la experiencia de usuario que sus proyectos exigen. Desde la simple generación de facturas hasta la producción de informes complejos, la solución combinada gestiona diversos requisitos de manera eficaz.

¿Listo para implementar esta solución? Comience su prueba gratuita de IronPDF para explorar cómo mejora su interfaz de usuario de Telerik para proyectos Blazor . Para uso en producción, consulte las opciones de licencia de IronPDF para encontrar la que mejor se adapte a sus necesidades.