Mejore su aplicación con las funciones del visor de PDF de Telerik Blazor

¿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 necesita generar archivos PDF dinámicamente desde 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. 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?

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. 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
        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;
    }
}

Imports System.Threading.Tasks
Imports Microsoft.AspNetCore.Components
Imports DinkToPdf

@page "/generate-pdf"
@inject ChromePdfRenderer Renderer

@code
    Private pdfData As Byte()

    Private Async Function GeneratePDF() As Task
        ' Create PDF from HTML content
        Dim 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
    End Function
End Code

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?

Si bien 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 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.

¿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.