Creación de un visor de PDF Telerik Blazor con IronPDF

¿Por qué combinar Telerik UI con IronPDF?

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 necesite generar archivos PDF dinámicamente a partir de HTML, URL o vistas Razor, IronPDF proporciona el motor de renderizado basado en Chrome que Telerik UI no incluye en sus bibliotecas de procesamiento de documentos.

Este enfoque híbrido le permite aprovechar las capacidades superiores de creación de PDF de IronPDF mientras utiliza los componentes de interfaz de usuario pulidos de Telerik para la visualización. Es especialmente útil cuando se necesita modernizar proyectos web heredados o crear nuevas soluciones de archivos PDF de Blazor que requieren funciones tanto de generación como de visualización. Además, la sencillez hace que sea una elección fácil.

¿Cómo puedo configurar un proyecto Blazor con ambas bibliotecas?

La instalación de ambas bibliotecas en su proyecto Blazor es sencilla. En primer lugar, instale los paquetes necesarios a través de NuGet:

Install-Package IronPDF Telerik.UI.for.Blazor

Tras la instalación, configura tu Program.cs para añadir servicios:

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

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 perfecta. El resultado es un sistema totalmente configurado.

¿Cómo crear documentos PDF con IronPDF para visualización?

IronPDF transforma el contenido HTML en archivos PDF que el visor de PDF Telerik puede mostrar. A continuación se explica cómo generar un PDF a partir de HTML y prepararlo para su visualización:

@page "/generate-pdf"
@inject ChromePdfRenderer Renderer
@code {
    private byte[] pdfData;
    private async Task GeneratePDF()
    {
        // Create PDF from HTML content
        var pdf = await Renderer.RenderHtmlAsPdfAsync(@"
            <h1>Invoice Report</h1>
            <table>
                <tr><td>Item</td><td>Amount</td></tr>
                <tr><td>Service</td><td>$100</td></tr>
            </table>");
        // 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
        var pdf = await Renderer.RenderHtmlAsPdfAsync(@"
            <h1>Invoice Report</h1>
            <table>
                <tr><td>Item</td><td>Amount</td></tr>
                <tr><td>Service</td><td>$100</td></tr>
            </table>");
        // Convert to byte array for Telerik viewer
        pdfData = pdf.BinaryData;
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

Este código genera un documento PDF listo para su visualización. El motor de renderizado de IronPDF garantiza que su contenido HTML, CSS e incluso JavaScript se renderice perfectamente, manteniendo todo el formato cuando los usuarios lo visualizan a través del componente visor de PDF.

La clase ChromePdfRenderer ofrece amplias opciones de personalización. Es posible configurar el tamaño de página, los márgenes, los encabezados, los pies de página e incluso definir CSS personalizados para medios impresos, características que complementan a la perfección las capacidades de visualización de Telerik. También es la forma de enviar datos al renderizador.

¿Cómo puedo integrar el componente PDF Viewer Blazor de Telerik?

Una vez generado el PDF con IronPDF, mostrarlo con el visor de PDF Telerik Blazor es muy 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>

IRON VB CONVERTER ERROR developers@ironsoftware.com

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. La referencia a los datos se realiza a través del atributo Data, que proporciona el valor 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. Esta funcionalidad es nativa del visor.

¿Cómo funcionan juntos estos componentes?

La integración crea un potente flujo de trabajo en el que IronPDF se encarga del trabajo pesado de la creación de PDF, mientras que Telerik proporciona una experiencia de visualización pulida. Aquí tienes un ejemplo completo:

@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 your 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 your HTML dynamically
        return "<h1>Dynamic Report</h1><p>Report content here</p>";
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

¿Por qué elegir este enfoque híbrido?

Aunque Telerik UI para Blazor ofrece excelentes capacidades de visualización, no iguala la potencia de generación de PDF de IronPDF. El motor basado en Chrome de IronPDF renderiza diseños complejos, formularios y contenido estilizado con los que las bibliotecas de procesamiento de documentos más sencillas podrían tener problemas. Combinando ambos, se obtiene una generación de PDF de nivel empresarial con una interfaz de visualización profesional.

Este enfoque también ofrece flexibilidad a los desarrolladores que necesiten 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.

Conclusión

La creación de un visor de PDF Telerik Blazor con IronPDF le ofrece lo mejor de ambos mundos: una potente generación de PDF y experiencias de visualización pulidas. Esta combinación ayuda a los desarrolladores a crear soluciones PDF completas que pueden modernizar los proyectos web heredados y satisfacer los requisitos de las aplicaciones modernas.

Tanto si está creando sistemas de gestión de documentos, herramientas de generación de informes o cualquier aplicación de Blazor que necesite capacidades PDF, esta integración proporciona la funcionalidad y la experiencia de usuario que sus proyectos exigen.

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