Améliorez votre application grâce aux fonctionnalités de la visionneuse PDF Telerik Blazor

Pourquoi combiner Telerik UI avec IronPDF ?

Le visualiseur PDF Telerik Blazor excelle dans l'affichage des PDF grâce à des fonctionnalités telles que la recherche de texte, les commandes de zoom et une barre d'outils personnalisable. Toutefois, lorsque vous devez générer des fichiers PDF de manière dynamique à partir de HTML, d'URL ou de vues Razor , IronPDF fournit le moteur de rendu basé sur Chrome que Telerik UI n'inclut pas dans ses bibliothèques de traitement de documents. Le moteur de rendu Chrome d'IronPDF garantit une précision au pixel près lors de la conversion de contenu web en PDF.

Cette approche hybride vous permet d'utiliser les capacités supérieures de création de PDF d'IronPDF tout en utilisant les composants d'interface utilisateur soignés de Telerik pour l'affichage. Il est particulièrement performant pour moderniser des projets web existants ou créer de nouvelles solutions PDF Blazor nécessitant à la fois des fonctionnalités de génération et de visualisation. Vous pouvez également ajouter des en-têtes et des pieds de page , appliquer des filigranes et définir des marges personnalisées à vos PDF générés avant de les afficher.

Comment installer et configurer le projet ?

La configuration des deux bibliothèques dans votre projet Blazor nécessite l'installation des packages NuGet nécessaires. Vous pouvez utiliser soit la console du gestionnaire de packages, soit l'interface de ligne de commande .NET . IronPDF est disponible sur NuGet et fonctionne avec .NET 10 et les versions ultérieures. Pour plus de détails, consultez le guide d'installation NuGet d'IronPDF.

Install-Package IronPdf
dotnet add package IronPdf

Install-Package IronPdf
dotnet add package IronPdf

Après l'installation, configurez votre Program.cs pour ajouter des services :

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

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

Cette configuration active à la fois les composants Telerik UI pour Blazor et les capacités de rendu d'IronPDF dans votre application. DevCraft Les utilisateurs de la suite qui connaissent déjà Telerik trouveront cette intégration simple. Pour des scénarios plus complexes, vous pourriez envisager la génération asynchrone de PDF ou des configurations de journalisation personnalisées.

Comment créer des documents PDF avec IronPDF pour l'affichage ?

IronPDF transforme le contenu HTML en fichiers PDF que le visualiseur PDF Telerik peut afficher. Voici comment générer un PDF à partir de HTML et le préparer pour la visualisation. Vous pouvez également convertir des chaînes HTML en PDF ou générer directement des fichiers HTML :

@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

Ce code génère un document PDF prêt à être affiché. Le moteur de rendu d'IronPDF garantit un rendu parfait de votre contenu HTML, CSS et JavaScript , en conservant toute la mise en forme lorsque les utilisateurs le consultent via le composant de visualisation PDF. Vous pouvez également ajouter des images aux PDF, intégrer des images provenant d'Azure Blob Storage ou convertir directement des images en PDF. Explorez l'ensemble des fonctionnalités IronPDF pour comprendre ce qui est possible.

La classe ChromePdfRenderer offre des options de personnalisation étendues. Vous pouvez définir la taille de la page, les marges, les en-têtes, les pieds de page et définir un CSS personnalisé pour les supports d'impression – des fonctionnalités qui complètent les capacités de visualisation de Telerik. Pour les scénarios avancés, explorez le contrôle des sauts de page, la configuration de la fenêtre d'affichage ou les paramètres d'URL de base pour un chargement correct des ressources.

Comment intégrer le composant Blazor de visionneuse PDF de Telerik ?

Une fois votre PDF généré avec IronPDF, son affichage avec la visionneuse PDF Telerik Blazor est simple :

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

Cette configuration de composants fournit les outils essentiels pour interagir avec les fichiers PDF. La barre d'outils comprend des boutons de navigation, des commandes de zoom et une fonction de recherche. Vous pouvez personnaliser les outils affichés en fonction des besoins de votre application. L'attribut Data fournit la valeur PDF à afficher. Pour une fonctionnalité améliorée, vous pourriez envisager d'implémenter des fonctions d'extraction de texte ou de recherche dans les fichiers PDF.

L'interface utilisateur Telerik pour Blazor gère automatiquement la compatibilité avec les navigateurs, fonctionnant sur les navigateurs modernes sans plugins. Pour les applications de bureau utilisant .NET MAUI, les deux bibliothèques prennent en charge le déploiement multiplateforme, vous permettant de créer des expériences PDF cohérentes sur les plateformes web et de bureau.

Comment ces composants fonctionnent-ils ensemble ?

Cette intégration crée un flux de travail efficace où IronPDF prend en charge les tâches complexes de création de PDF tandis que Telerik offre une expérience de visualisation soignée. Voici un exemple complet qui illustre la création de PDF à partir de HTML avec du contenu dynamique :

@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

Pourquoi choisir cette approche hybride ?

Bien que Telerik UI pour Blazor offre d'excellentes capacités de visualisation, il n'égale pas la puissance de génération de PDF d'IronPDF. Le moteur d'IronPDF, basé sur Chrome, affiche des mises en page complexes, des formulaires et du contenu stylisé avec lesquels les bibliothèques de traitement de documents plus simples peuvent avoir des difficultés. En combinant les deux, vous obtenez une génération de PDF Professional ainsi qu'une interface de visualisation Professional .

Cette approche offre une flexibilité aux développeurs qui ont besoin d'explorer différentes options d'affichage. Vous pourriez remplacer le visualiseur Telerik par un affichage iframe plus simple ou développer des composants de visualisation personnalisés tout en conservant les capacités de génération d'IronPDF. La solution s'adapte parfaitement, des simples conversions HTML vers PDF aux scénarios complexes de génération de rapports. La page d'accueil IronPDF offre un aperçu de tous les cas d'utilisation pris en charge.

Quelles sont les prochaines étapes de la mise en œuvre ?

Créer une visionneuse PDF Telerik Blazor avec IronPDF vous offre le meilleur des deux mondes : une génération de PDF efficace et une expérience de visualisation soignée. Cette combinaison vous permet de créer des solutions PDF complètes capables de moderniser les projets web existants et de répondre aux exigences des applications modernes. Que le déploiement se fasse sous Windows, Linux ou macOS, les deux bibliothèques offrent une prise en charge multiplateforme.

Que vous développiez des systèmes de gestion de documents, des outils de reporting ou toute application Blazor nécessitant des fonctionnalités PDF, cette intégration offre les fonctionnalités et l'expérience utilisateur requises par vos projets. De la simple génération de factures à la production de rapports complexes, la solution combinée répond efficacement à des exigences diverses.

Prêt à mettre en œuvre cette solution ? Démarrez votre essai gratuit IronPDF pour découvrir comment il améliore vos projets Telerik UI pour Blazor . Pour une utilisation en production, consultez les options de licence IronPDF afin de trouver celle qui correspond le mieux à vos besoins.