Création d'une visionneuse PDF Telerik Blazor avec IronPDF

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 utile lorsque vous devez 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. Sa simplicité en fait un choix évident. 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 configurer un projet Blazor avec les deux bibliothèques ?

Configurer les deux bibliothèques dans votre projet Blazor est simple. Commencez par installer les packages nécessaires via NuGet. Vous pouvez suivre le guide d'installation détaillé ou utiliser le gestionnaire de packages NuGet :

Install-Package IronPDF Telerik.UI.for.Blazor

Après l'installation, configurez votre Program.cs pour ajouter les 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. Les utilisateurs de la suite DevCraft qui connaissent déjà Telerik trouveront cette intégration très fluide. Le résultat est un système entièrement configuré. 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 , générer des fichiers HTML , ou même convertir du Markdown en PDF :

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

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 même 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 .

La classe ChromePdfRenderer offre de nombreuses options de personnalisation. Vous pouvez définir la taille de la page, les marges, les en-têtes, les pieds de page et même définir un CSS personnalisé pour les supports imprimés — des fonctionnalités qui complètent parfaitement 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 de l'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. Vous pouvez également explorer la visualisation des fichiers PDF dans les applications MAUI pour les scénarios multiplateformes :

<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 l'extraction de texte , des capacités de recherche PDF ou des fonctionnalités d'annotation .

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. Cette fonctionnalité est native au visualiseur. Vous pouvez également exporter les PDF vers différents formats ou les pixelliser en images pour plus de flexibilité.

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

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 des bibliothèques de traitement de documents plus simples pourraient avoir du mal. En combinant les deux, vous obtenez une génération de PDF professionnelle avec une interface de visualisation professionnelle. Cette approche prend également en charge des fonctionnalités avancées telles que la conformité PDF/A , l'accessibilité PDF/UA et la gestion des métadonnées .

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 .

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 vous travailliez avec des déploiements 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 aux transformations complexes XML vers PDF , la solution combinée répond efficacement à des exigences diverses.

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