Icône de message
Passer au contenu du pied de page
  1. IronPDF
  2. Blog IronPDF
  3. Utilisation de IronPDF
  4. Visionneuse PDF Blazor
UTILISATION DE IRONPDF

Comment créer un visualiseur de PDF Blazor en utilisant IronPDF

Curtis Chau
Curtis Chau
Mis à jour:

Créer un visualiseur PDF Blazor dans les applications Blazor Server est un besoin courant pour les applications commerciales qui affichent des factures, des rapports et des documents dans le navigateur. Ce guide explique comment configurer un visualiseur PDF entièrement fonctionnel dans Blazor en utilisant IronPDF. Il vous permet de générer, de personnaliser et d'ouvrir des fichiers PDF au sein de votre projet Blazor sans effort.

Contrairement aux outils de navigateur tiers, IronPDF rend facile la création d'un visualiseur PDF puissant avec des outils intégrés comme le zoom, la navigation, la sélection de texte et l'impression. Les développeurs peuvent également ajouter des fonctionnalités telles que le remplissage de formulaires, les annotations et l'orientation de commutation dans le sens antihoraire pour faire pivoter les documents PDF chargés.

Commencez avec IronPDF aujourd'hui et transformez la façon dont vos applications Blazor gèrent les documents PDF.

Comment configurer IronPDF dans un projet Blazor Server ?

Commencer avec IronPDF dans votre projet de visualiseur PDF Blazor Server ne nécessite que quelques étapes. Tout d'abord, installez le paquet NuGet IronPDF en utilisant la console du gestionnaire de paquets :

Install-Package IronPdf

Alternativement, vous pouvez utiliser l'interface utilisateur du gestionnaire de paquets NuGet pour rechercher "IronPdf" et sélectionner la dernière version.

NuGet Installer avec NuGet

PM >  Install-Package IronPdf

Consultez IronPDF sur NuGet pour une installation rapide. Avec plus de 10 millions de téléchargements, il transforme le développement PDF avec C#. Vous pouvez également télécharger le DLL ou l'installateur Windows.

Après l'installation, ajoutez votre clé de licence au fichier Program.cs pour débloquer toutes les fonctionnalités :

// Program.cs
IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";
// Program.cs
IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

Pour le développement et les tests, IronPDF fonctionne sans clé de licence mais ajoute un filigrane aux PDF générés. Vous pouvez obtenir une licence d'essai gratuite pour supprimer le filigrane pendant le développement. IronPDF prend en charge à la fois les applications Blazor Server et Blazor WebAssembly, vous pouvez donc ajouter la génération et la visualisation de PDF aux applications de bureau, mobiles ou même aux projets .NET MAUI.

Comment puis-je afficher un fichier PDF à partir d'une URL dans Blazor ?

La manière la plus simple de créer un visualiseur PDF dans Blazor est de convertir une URL en PDF et de l'afficher dans un iframe. La classe ChromePdfRenderer de IronPDF gère la conversion en utilisant son moteur de rendu Chrome, en maintenant tous les styles et la fonctionnalité JavaScript de la page d'origine.

Voici un composant Razor complet qui rend une URL en tant que PDF :

@page "/pdfviewer"
@using IronPdf
<h3>PDF Viewer</h3>
<button @onclick="GeneratePdf" class="btn btn-primary">Load PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}
@code {
    private string pdfDataUri = string.Empty;
    private async Task GeneratePdf()
    {
        var renderer = new ChromePdfRenderer();
        // Convert URL to PDF
        var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");
        // Convert to base64 and create data URI for iframe display
        var base64String = Convert.ToBase64String(pdf.BinaryData);
        pdfDataUri = $"data:application/pdf;base64,{base64String}";
    }
}
@page "/pdfviewer"
@using IronPdf
<h3>PDF Viewer</h3>
<button @onclick="GeneratePdf" class="btn btn-primary">Load PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}
@code {
    private string pdfDataUri = string.Empty;
    private async Task GeneratePdf()
    {
        var renderer = new ChromePdfRenderer();
        // Convert URL to PDF
        var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");
        // Convert to base64 and create data URI for iframe display
        var base64String = Convert.ToBase64String(pdf.BinaryData);
        pdfDataUri = $"data:application/pdf;base64,{base64String}";
    }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

La méthode RenderUrlAsPdfAsync récupère le contenu de la page web, le convertit au format PDF, et l'affiche dans votre composant de visualiseur PDF Blazor. Cette approche fonctionne sur les téléphones de bureau et mobiles, avec une barre d'outils intégrée pour naviguer, zoomer et imprimer les PDF. Le document PDF chargé devrait apparaître de manière similaire à ce qu'on voit dans l'image suivante :

Comment créer un visualiseur PDF Blazor en utilisant IronPDF : Figure 1 - Vue du PDF à partir de l'URL

Comment personnaliser la génération de PDF ?

IronPDF fournit de nombreuses options de personnalisation via la classe ChromePdfRenderOptions pour votre composant de visualiseur PDF Blazor. Vous pouvez ajouter des en-têtes, des pieds de page, ajuster les marges et contrôler la mise en page pour créer des documents d'aspect professionnel. Apprenez-en plus sur les options de rendu dans la documentation.

@page "/pdfcustom"
@using IronPdf
<h3>Customized PDF Viewer</h3>
<button @onclick="GenerateCustomizedPdf" class="btn btn-primary">Generate Customized PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}
@code {
    private string pdfDataUri = string.Empty;
    private async Task GenerateCustomizedPdf()
    {
        var renderer = new ChromePdfRenderer();
        // Assign rendering options to the renderer
        renderer.RenderingOptions = new ChromePdfRenderOptions
        {
            PaperSize = IronPdf.Rendering.PdfPaperSize.A4,
            MarginTop = 25,
            MarginBottom = 25,
            MarginLeft = 20,
            MarginRight = 20,
            // Add header with title
            TextHeader = new TextHeaderFooter
            {
                CenterText = "Monthly Report - {date}",
                FontSize = 12
            },
            // Add footer with page numbers
            TextFooter = new TextHeaderFooter
            {
                LeftText = "Confidential",
                RightText = "Page {page} of {total-pages}",
                FontSize = 10
            }
        };
        // Now generate with options applied
        var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
        // Display in iframe
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}
@page "/pdfcustom"
@using IronPdf
<h3>Customized PDF Viewer</h3>
<button @onclick="GenerateCustomizedPdf" class="btn btn-primary">Generate Customized PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}
@code {
    private string pdfDataUri = string.Empty;
    private async Task GenerateCustomizedPdf()
    {
        var renderer = new ChromePdfRenderer();
        // Assign rendering options to the renderer
        renderer.RenderingOptions = new ChromePdfRenderOptions
        {
            PaperSize = IronPdf.Rendering.PdfPaperSize.A4,
            MarginTop = 25,
            MarginBottom = 25,
            MarginLeft = 20,
            MarginRight = 20,
            // Add header with title
            TextHeader = new TextHeaderFooter
            {
                CenterText = "Monthly Report - {date}",
                FontSize = 12
            },
            // Add footer with page numbers
            TextFooter = new TextHeaderFooter
            {
                LeftText = "Confidential",
                RightText = "Page {page} of {total-pages}",
                FontSize = 10
            }
        };
        // Now generate with options applied
        var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
        // Display in iframe
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

Les variables de modèle, telles que {page}, {total-pages}, et {date}, sont automatiquement remplacées par les valeurs réelles lors de la génération du PDF dans votre visualiseur PDF Blazor. Vous pouvez également utiliser les propriétés HtmlHeader et HtmlFooter pour des mises en page plus complexes avec du contenu HTML. Cela garantit que votre visualiseur PDF Blazor peut rendre des documents performants avec une mise en page correcte, un branding et des champs de formulaire là où nécessaire. Pour une personnalisation détaillée des en-têtes et pieds de page, consultez le guide des en-têtes et pieds de page.

Comment créer un visualiseur PDF Blazor en utilisant IronPDF : Figure 2 - PDF personnalisé ouvert dans le visualiseur PDF

Quelle est la meilleure façon de permettre les téléchargements de PDF ?

Bien qu'afficher des PDFs dans Blazor à l'aide d'un iframe fonctionne bien pour la visualisation, les utilisateurs ont souvent besoin de télécharger le document. Vous pouvez implémenter cela en utilisant JavaScript InterOp pour déclencher un téléchargement par le navigateur. Pour plus d'options de téléchargement, consultez notre guide d'exportation et de sauvegarde de PDF :

@page "/pdfdownload"
@using IronPdf
@inject IJSRuntime JSRuntime
<h3>Download PDF</h3>
<button @onclick="DownloadPdf" class="btn btn-success">Download PDF</button>
@code {
    private async Task DownloadPdf()
    {
        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
        using var streamRef = new DotNetStreamReference(stream: new MemoryStream(pdf.BinaryData));
        await JSRuntime.InvokeVoidAsync("downloadFileFromStream", "invoice.pdf", streamRef);
    }
}
@page "/pdfdownload"
@using IronPdf
@inject IJSRuntime JSRuntime
<h3>Download PDF</h3>
<button @onclick="DownloadPdf" class="btn btn-success">Download PDF</button>
@code {
    private async Task DownloadPdf()
    {
        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
        using var streamRef = new DotNetStreamReference(stream: new MemoryStream(pdf.BinaryData));
        await JSRuntime.InvokeVoidAsync("downloadFileFromStream", "invoice.pdf", streamRef);
    }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

Ajoutez cette fonction JavaScript à votre fichier _Host.cshtml (comme discuté dans la documentation JavaScript InterOp de Microsoft Blazor) :

<script>
    window.downloadFileFromStream = async (fileName, contentStreamReference) => {
        const arrayBuffer = await contentStreamReference.arrayBuffer();
        const blob = new Blob([arrayBuffer]);
        const url = URL.createObjectURL(blob);
        const anchorElement = document.createElement('a');
        anchorElement.href = url;
        anchorElement.download = fileName ?? '';
        anchorElement.click();
        anchorElement.remove();
        URL.revokeObjectURL(url);
    }
</script>
<script>
    window.downloadFileFromStream = async (fileName, contentStreamReference) => {
        const arrayBuffer = await contentStreamReference.arrayBuffer();
        const blob = new Blob([arrayBuffer]);
        const url = URL.createObjectURL(blob);
        const anchorElement = document.createElement('a');
        anchorElement.href = url;
        anchorElement.download = fileName ?? '';
        anchorElement.click();
        anchorElement.remove();
        URL.revokeObjectURL(url);
    }
</script>
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

Comment puis-je générer des PDF à partir de composants Razor ?

L'une des fonctionnalités les plus puissantes pour afficher des PDFs dans Blazor est de générer des PDFs directement à partir de contenu HTML, y compris des données dynamiques. Cette approche est parfaite pour créer des factures, des rapports ou tout document basé sur des données. Consultez notre guide sur la conversion de HTML à PDF pour des techniques plus avancées :

@page "/invoicedemo"
@using IronPdf
<h3>Invoice Generator</h3>
<button @onclick="GenerateInvoice" class="btn btn-primary">Generate Invoice PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}
@code {
    private string pdfDataUri = string.Empty;
    private async Task GenerateInvoice()
    {
        var invoiceHtml = $@"
            <html>
            <head>
                <style>
                    body {{ font-family: Arial, sans-serif; }}
                    .header {{ background-color: #f0f0f0; padding: 20px; }}
                    .invoice-table {{ width: 100%; border-collapse: collapse; }}
                    .invoice-table th, .invoice-table td {{ border: 1px solid #ddd; padding: 8px; }}
                    .total {{ font-weight: bold; font-size: 18px; }}
                </style>
            </head>
            <body>
                <div class='header'>
                    <h1>Invoice #INV-2024-001</h1>
                    <p>Date: {DateTime.Now:MM/dd/yyyy}</p>
                </div>
                <table class='invoice-table'>
                    <thead>
                        <tr>
                            <th>Item</th>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>IronPDF License</td>
                            <td>1</td>
                            <td>$799</td>
                            <td>$799</td>
                        </tr>
                        <tr>
                            <td>Priority Support</td>
                            <td>1</td>
                            <td>$250</td>
                            <td>$250</td>
                        </tr>
                    </tbody>
                </table>
                <p class='total'>Total Amount: $1,199</p>
            </body>
            </html>";
        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync(invoiceHtml);
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}
@page "/invoicedemo"
@using IronPdf
<h3>Invoice Generator</h3>
<button @onclick="GenerateInvoice" class="btn btn-primary">Generate Invoice PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}
@code {
    private string pdfDataUri = string.Empty;
    private async Task GenerateInvoice()
    {
        var invoiceHtml = $@"
            <html>
            <head>
                <style>
                    body {{ font-family: Arial, sans-serif; }}
                    .header {{ background-color: #f0f0f0; padding: 20px; }}
                    .invoice-table {{ width: 100%; border-collapse: collapse; }}
                    .invoice-table th, .invoice-table td {{ border: 1px solid #ddd; padding: 8px; }}
                    .total {{ font-weight: bold; font-size: 18px; }}
                </style>
            </head>
            <body>
                <div class='header'>
                    <h1>Invoice #INV-2024-001</h1>
                    <p>Date: {DateTime.Now:MM/dd/yyyy}</p>
                </div>
                <table class='invoice-table'>
                    <thead>
                        <tr>
                            <th>Item</th>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>IronPDF License</td>
                            <td>1</td>
                            <td>$799</td>
                            <td>$799</td>
                        </tr>
                        <tr>
                            <td>Priority Support</td>
                            <td>1</td>
                            <td>$250</td>
                            <td>$250</td>
                        </tr>
                    </tbody>
                </table>
                <p class='total'>Total Amount: $1,199</p>
            </body>
            </html>";
        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync(invoiceHtml);
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
$vbLabelText   $csharpLabel

Cette méthode vous donne un contrôle total sur le contenu et le style du PDF dans votre visualiseur PDF Blazor, vous permettant de créer des documents pixel parfaits à partir des données de votre application. Pour des scénarios de rendu HTML plus complexes, explorez nos tutoriels sur HTML à PDF.

Comment créer un visualiseur PDF Blazor en utilisant IronPDF : Figure 3 - PDF de facture dans le visualiseur

Quelles autres opérations PDF puis-je effectuer ?

IronPDF offre de nombreux autres outils et extensions au-delà de la simple visualisation :

  • Fusionner des pages PDF en un seul document
  • Ajouter des annotations et des fonctionnalités d'édition
  • Appliquer une protection par mot de passe et une sécurité
  • Activer le téléchargement et créer dynamiquement des rapports de tableau

Chacune de ces extensions élargit le panorama de ce qui est possible dans un composant de visualiseur PDF Blazor, donnant aux développeurs un contrôle total sur les données, les flux de travail du projet et des exemples d'applications. For more detailed information on these features, check out the guides on merging PDFs, watermarking, and PDF security.

Conclusion

Vous avez maintenant une base pour implémenter un visualiseur PDF dans votre application Blazor Server en utilisant IronPDF. De l'affichage de l'URL de base à la génération dynamique basée sur les composants, IronPDF fournit les outils nécessaires pour gérer les exigences PDF dans les applications web modernes. Pour des ressources de développement Blazor supplémentaires, considérez explorer la documentation officielle Blazor de Microsoft.

La combinaison du moteur de rendu Chrome d'IronPDF et du modèle de composant Blazor crée une solution puissante pour générer et afficher des documents PDF professionnels directement dans le navigateur, éliminant le besoin de visualiseurs PDF ou de plugins externes.

Prêt à implémenter la fonctionnalité PDF dans votre application Blazor ? Commencez votre essai gratuit pour trouver l'ajustement parfait pour votre projet.

Questions Fréquemment Posées

Qu'est-ce qu'une visionneuse PDF Blazor ?

Une visionneuse PDF Blazor est un composant utilisé dans les applications Blazor Server pour afficher des documents PDF tels que des factures, des rapports et d'autres fichiers directement dans le navigateur.

Comment puis-je implémenter une visionneuse PDF dans une application Blazor ?

Vous pouvez implémenter une visionneuse PDF dans une application Blazor en utilisant IronPDF, qui vous permet de générer, personnaliser et ouvrir des fichiers PDF sans effort dans votre projet Blazor.

Pourquoi devrais-je utiliser IronPDF pour ma visionneuse PDF Blazor ?

IronPDF est une solution robuste pour intégrer des capacités de visualisation PDF dans les applications Blazor, offrant une génération et une personnalisation faciles des fichiers PDF, améliorant l'expérience utilisateur et rationalisant la gestion des documents.

Quels sont les avantages d'utiliser une visionneuse PDF dans les applications Blazor ?

L'utilisation d'une visionneuse PDF dans les applications Blazor améliore l'expérience utilisateur en permettant aux utilisateurs de visualiser des documents directement dans le navigateur. Elle est particulièrement utile pour afficher des documents commerciaux comme des factures et des rapports.

IronPDF peut-il gérer la génération de PDF dans les applications Blazor ?

Oui, IronPDF peut gérer la génération de PDF dans les applications Blazor, permettant une création et une personnalisation fluides de documents PDF pour répondre à divers besoins commerciaux.

Est-il possible de personnaliser les fichiers PDF à l'aide de IronPDF dans Blazor ?

Absolument, IronPDF offre de nombreuses options de personnalisation pour les fichiers PDF dans les applications Blazor, permettant aux développeurs d'adapter les documents selon des exigences spécifiques.

Quels types de documents peuvent être affichés à l'aide d'une visionneuse PDF Blazor ?

Une visionneuse PDF Blazor peut afficher une variété de documents, y compris des factures, des rapports, et tout autre document pouvant être converti en format PDF.

IronPDF prend-il en charge l'ouverture de fichiers PDF dans les projets Blazor ?

Oui, IronPDF supporte l'ouverture de fichiers PDF au sein des projets Blazor, facilitant la visualisation et la gestion de documents PDF directement dans le navigateur.

Quelle est l'expérience utilisateur avec une visionneuse PDF Blazor ?

L'expérience utilisateur avec une visionneuse PDF Blazor est améliorée car les utilisateurs peuvent facilement visualiser et interagir avec les documents PDF dans leur navigateur Web, fournissant un processus de gestion de documents fluide et efficace.

IronPDF est-il compatible avec .NET 10 pour les projets de visionneuse PDF Blazor ?

Oui, IronPDF est entièrement compatible avec .NET 10. Il prend en charge toutes les versions récentes de .NET (10, 9, 8, 7, 6, Core, Framework) et fonctionne dans les applications Web Blazor sous .NET 10 sans aucune configuration particulière.

Curtis Chau
Curtis Chau
  Discutez maintenant avec l'équipe d'ingénierie
Rédacteur technique

Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes ...

Lire la suite

Articles connexes

Essai de 30 jours → Produit complet. Pas de limites. Pas de carte. Démarrer l'essai gratuit