Aprimore seu aplicativo com os recursos do Telerik Blazor PDF Viewer.

Por que combinar o Telerik UI com o IronPDF?

O visualizador de PDF Telerik Blazor se destaca na exibição de PDFs com recursos como busca de texto, controles de zoom e uma barra de ferramentas personalizável. No entanto, quando você precisa gerar arquivos PDF dinamicamente a partir de HTML, URLs ou visualizações Razor , o IronPDF fornece o mecanismo de renderização baseado no Chrome que a Telerik UI não inclui em suas bibliotecas de processamento de documentos. O mecanismo de renderização Chrome do IronPDF garante precisão perfeita em cada pixel ao converter conteúdo da web para PDF.

Essa abordagem híbrida permite que você utilize os recursos superiores de criação de PDFs do IronPDF, ao mesmo tempo que usa os componentes de interface do usuário refinados da Telerik para a exibição. Funciona particularmente bem na modernização de projetos web legados ou na criação de novas soluções Blazor PDF que exigem recursos de geração e visualização. Você também pode adicionar cabeçalhos e rodapés , aplicar marcas d'água e definir margens personalizadas aos seus PDFs gerados antes de exibi-los.

Como instalar e configurar o projeto?

A configuração de ambas as bibliotecas em seu projeto Blazor requer a instalação dos pacotes NuGet necessários. Você pode usar o Console do Gerenciador de Pacotes ou a CLI do .NET . O IronPDF está disponível no NuGet e funciona com o .NET 10 e versões posteriores. Para obter mais detalhes, consulte o guia de instalação do IronPDF NuGet .

Install-Package IronPdf
dotnet add package IronPdf

Install-Package IronPdf
dotnet add package IronPdf

Após a instalação, configure seu Program.cs para adicionar serviços:

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

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

Essa configuração habilita tanto os componentes do Telerik UI para Blazor quanto os recursos de renderização do IronPDF em seu aplicativo. Usuários do pacote DevCraft que já estão familiarizados com a Telerik acharão essa integração simples. Para cenários mais complexos, você pode explorar a geração assíncrona de PDFs ou configurações de registro personalizadas.

Como criar documentos PDF para exibição com o IronPDF ?

O IronPDF transforma conteúdo HTML em arquivos PDF que o visualizador de PDF da Telerik pode exibir. Veja como gerar um PDF a partir de HTML e prepará-lo para visualização. Você também pode converter strings HTML em PDF ou renderizar arquivos HTML diretamente:

@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 gera um documento PDF pronto para exibição. O mecanismo de renderização do IronPDF garante que seu conteúdo HTML, CSS e JavaScript seja renderizado perfeitamente, mantendo toda a formatação quando os usuários o visualizam por meio do componente de visualização de PDF. Você também pode adicionar imagens a PDFs, incorporar imagens do Armazenamento de Blobs do Azure ou converter imagens diretamente para PDF. Explore toda a gama de funcionalidades do IronPDF para compreender o que é possível fazer.

A classe ChromePdfRenderer oferece amplas opções de personalização. Você pode definir o tamanho da página, as margens, os cabeçalhos, os rodapés e definir CSS personalizado para mídia impressa — recursos que complementam as capacidades de visualização da Telerik. Para cenários avançados, explore o controle de quebra de página, a configuração da área de visualização ou as configurações de URL base para o carregamento adequado de recursos.

Como integrar o componente Blazor do visualizador de PDF da Telerik?

Depois de gerar o seu PDF com o IronPDF, exibi-lo com o visualizador de PDF Telerik Blazor é muito simples:

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

Essa configuração de componentes fornece ferramentas essenciais para interagir com PDFs. A barra de ferramentas inclui botões de navegação, controles de nível de zoom e funcionalidade de pesquisa. Você pode personalizar quais ferramentas aparecem com base nas necessidades da sua aplicação. O atributo Data fornece o valor do PDF a ser exibido. Para melhorar a funcionalidade, você pode implementar recursos de extração de texto ou de busca em PDFs.

O visualizador Telerik UI para Blazor lida automaticamente com a compatibilidade entre navegadores, funcionando em navegadores modernos sem a necessidade de plugins. Para aplicações desktop que utilizam .NET MAUI, ambas as bibliotecas suportam a implementação multiplataforma, permitindo criar experiências consistentes em PDF em plataformas web e desktop.

Como esses componentes funcionam juntos?

A integração cria um fluxo de trabalho eficaz, onde o IronPDF lida com o trabalho pesado da criação de PDFs, enquanto o Telerik fornece a experiência de visualização refinada. Aqui está um exemplo completo que demonstra a criação de PDFs a partir de HTML com conteúdo 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 que escolher essa abordagem híbrida?

Embora o Telerik UI para Blazor ofereça excelentes recursos de visualização, ele não se compara ao poder de geração de PDFs do IronPDF. O mecanismo do IronPDF, baseado no Chrome, renderiza layouts complexos, formulários e conteúdo estilizado com os quais bibliotecas de processamento de documentos mais simples podem ter dificuldades. Ao combinar ambos, você obtém geração de PDF profissional juntamente com uma interface de visualização profissional.

Essa abordagem oferece flexibilidade para desenvolvedores que precisam explorar diferentes opções de visualização. Você pode substituir o visualizador Telerik por uma exibição iframe mais simples ou desenvolver componentes de visualização personalizados, mantendo os recursos de geração do IronPDF. A solução se adapta bem, desde conversões simples de HTML para PDF até cenários complexos de geração de relatórios. A página inicial do IronPDF oferece uma visão geral de todos os casos de uso suportados.

Quais são os próximos passos para a implementação?

Criar um visualizador de PDF para Telerik Blazor com o IronPDF oferece o melhor dos dois mundos: geração eficiente de PDFs e experiências de visualização refinadas. Essa combinação ajuda você a criar soluções completas em PDF que podem modernizar projetos web legados e atender aos requisitos de aplicativos modernos. Seja para implantação em Windows, Linux ou macOS, ambas as bibliotecas oferecem suporte multiplataforma.

Seja para criar sistemas de gerenciamento de documentos, ferramentas de geração de relatórios ou qualquer aplicativo Blazor que precise de recursos de PDF, esta integração oferece a funcionalidade e a experiência do usuário que seus projetos exigem. Desde a simples geração de faturas até a produção de relatórios complexos, a solução integrada lida com diversas necessidades de forma eficaz.

Pronto para implementar esta solução? Inicie seu teste gratuito do IronPDF para explorar como ele aprimora seus projetos Telerik UI para Blazor . Para uso em produção, confira as opções de licenciamento do IronPDF para encontrar a solução ideal para suas necessidades.