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 construire un visualiseur de PDF Blazor avec IronPDF

Curtis Chau
Curtis Chau
Mis à jour:

Un visualiseur PDF Blazor rend les documents PDF en ligne en les convertissant en URI de données base64 et en chargeant le résultat dans un élément <iframe>. Le ChromePdfRenderer d'IronPDF convertit des chaînes HTML, des URLs dynamiques ou du contenu dynamique en octets PDF en un seul appel asynchrone, donnant aux applications Blazor Server et Blazor WebAssembly une capacité complète de génération et d'affichage de PDF sans plugins visualiseurs externes.

Les applications métiers ont régulièrement besoin d'afficher des factures, des contrats et des rapports sans rediriger les utilisateurs vers un autre onglet ou se fier au support PDF des navigateurs qui varie selon les appareils. Le modèle de composant de Blazor facilite la génération d'un PDF sur le serveur, son encodage, et son diffusion dans n'importe quel composant de page, à condition que la bibliothèque gère la conversion de manière fiable.

Ce guide couvre l'installation, le rendu basé sur des URLs et du HTML, la personnalisation avec des en-têtes et des pieds de page, les téléchargements de navigateurs à l'aide de la communication JavaScript, une comparaison des approches Blazor Server et Blazor WebAssembly, et quatre opérations étendues : fusion, annotations, protection par mot de passe et affichage de fichiers téléversés par l'utilisateur. Des composants Razor et des exemples équivalents en C# de haut niveau sont fournis pour chaque technique.

Commencez un essai gratuit d'IronPDF pour suivre les exemples de ce guide.

Comment commencer avec IronPDF dans un projet Blazor ?

Pour démarrer, il est nécessaire d'installer le package NuGet et d'ajouter une clé de licence à Program.cs. Installez IronPDF depuis la console du gestionnaire de packages :

Install-Package IronPdf

Sinon, recherchez "IronPdf" dans l'interface utilisateur du gestionnaire de packages NuGet et sélectionnez 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 installation, ajoutez votre clé de licence à Program.cs avant toute opération PDF :

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";
IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";
$vbLabelText   $csharpLabel

IronPDF est compatible avec .NET 10, .NET 9, .NET 8, .NET 6, et le .NET Framework 4.6.2 et plus. Pour le développement et les tests, la bibliothèque fonctionne sans clé de licence mais ajoute un filigrane sur les PDFs générés. Une licence d'essai gratuite élimine le filigrane pendant l'évaluation.

IronPDF supporte à la fois les projets Blazor Server et Blazor WebAssembly. Dans Blazor Server, le moteur de rendu fonctionne directement sur le serveur. Dans Blazor WebAssembly, la génération de PDF nécessite un point d'API côté serveur; la section architecture plus loin dans ce guide explique les deux approches.

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

La façon la plus directe de créer un visualisateur PDF Blazor est de convertir une URL en PDF et de l'afficher dans un <iframe>. Le ChromePdfRenderer d'IronPDF récupère la page Web et la convertit en format PDF en utilisant le même moteur de rendu Chrome qui alimente Google Chrome, conservant fidèlement le CSS, le résultat JavaScript et la mise en page.

Approche du composant Razor

Le composant Razor suivant convertit une URL en PDF et l'affiche en ligne. La méthode GeneratePdf fonctionne sur le serveur dans une application Blazor Server, donc le moteur de rendu Chrome complet est disponible :

@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 the URL to PDF using the Chrome rendering engine
        var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");
        // Encode the PDF bytes as a base64 data URI for iframe display
        var base64 = Convert.ToBase64String(pdf.BinaryData);
        pdfDataUri = $"data:application/pdf;base64,{base64}";
    }
}

Exemple de C# de haut niveau

Pour les services en arrière-plan, les applications console ou les points d'API côté serveur, la même conversion utilise des appels d'API identiques, hors de tout contexte de composant :

using IronPdf;

var renderer = new ChromePdfRenderer();
// Fetch and convert the target URL to a PDF document
var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");

// Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf");
byte[] pdfBytes = pdf.BinaryData;
using IronPdf;

var renderer = new ChromePdfRenderer();
// Fetch and convert the target URL to a PDF document
var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");

// Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf");
byte[] pdfBytes = pdf.BinaryData;
$vbLabelText   $csharpLabel

RenderUrlAsPdfAsync récupère la page, exécute tout le JavaScript, applique le CSS, et renvoie un objet PdfDocument contenant le résultat rendu. La propriété BinaryData expose les octets bruts du PDF pour le stockage, la diffusion ou l'affichage. Le <iframe> affiche le résultat avec une barre d'outils de navigateur intégrée pour le zoom, la navigation et l'impression.

Comment créer un visualiseur PDF Blazor avec IronPDF : Figure 1 - Sortie du visualiseur PDF de l'URL au PDF

Comment personnaliser la génération de PDF ?

IronPDF fournit un contrôle de la sortie via la classe ChromePdfRenderOptions. Vous pouvez définir la taille du papier, ajuster les marges, et ajouter des en-têtes et pieds de page en texte ou HTML à chaque page. Le guide des options de rendu couvre la liste complète des propriétés disponibles.

Approche du composant Razor

Le composant suivant configure du papier A4 avec des marges et ajoute du texte d'en-tête et de pied de page à chaque page. Attribuez RenderingOptions avant d'appeler toute méthode de rendu pour les appliquer globalement à l'instance du moteur de rendu :

@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
        {
            RenderingOptions = new ChromePdfRenderOptions
            {
                PaperSize = IronPdf.Rendering.PdfPaperSize.A4,
                MarginTop = 25,
                MarginBottom = 25,
                MarginLeft = 20,
                MarginRight = 20,
                // Header with dynamic date replacement
                TextHeader = new TextHeaderFooter
                {
                    CenterText = "Monthly Report - {date}",
                    FontSize = 12
                },
                // Footer with page numbering
                TextFooter = new TextHeaderFooter
                {
                    LeftText = "Confidential",
                    RightText = "Page {page} of {total-pages}",
                    FontSize = 10
                }
            }
        };

        var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

Exemple de C# de haut niveau

Les mêmes options s'appliquent dans tout contexte .NET. Ce modèle fonctionne bien à l'intérieur d'une API minimale ASP.NET Core ou d'un générateur de rapports planifié :

using IronPdf;
using IronPdf.Rendering;

var renderer = new ChromePdfRenderer
{
    RenderingOptions = new ChromePdfRenderOptions
    {
        PaperSize = PdfPaperSize.A4,
        MarginTop = 25,
        MarginBottom = 25,
        TextHeader = new TextHeaderFooter { CenterText = "Report - {date}", FontSize = 12 },
        TextFooter = new TextHeaderFooter { RightText = "Page {page} of {total-pages}", FontSize = 10 }
    }
};

var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
pdf.SaveAs("customized-report.pdf");
using IronPdf;
using IronPdf.Rendering;

var renderer = new ChromePdfRenderer
{
    RenderingOptions = new ChromePdfRenderOptions
    {
        PaperSize = PdfPaperSize.A4,
        MarginTop = 25,
        MarginBottom = 25,
        TextHeader = new TextHeaderFooter { CenterText = "Report - {date}", FontSize = 12 },
        TextFooter = new TextHeaderFooter { RightText = "Page {page} of {total-pages}", FontSize = 10 }
    }
};

var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
pdf.SaveAs("customized-report.pdf");
$vbLabelText   $csharpLabel

Les variables de modèle y compris {page}, {total-pages}, et {date} sont remplacées par des valeurs réelles au moment du rendu. Pour des mises en page de marque complexes, utilisez les propriétés HtmlHeader et HtmlFooter au lieu de TextHeader et TextFooter. Le guide des en-têtes et pieds de page contient des exemples complets pour les deux approches.

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

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

Afficher des PDFs dans un <iframe> gère la visualisation, mais les utilisateurs ont souvent besoin de télécharger le fichier. L'interopération JavaScript déclenche un téléchargement de navigateur à partir d'un flux d'octets .NET. Pour des modèles de téléchargement et d'exportation supplémentaires, consultez le guide d'exportation et de sauvegarde de PDF.

Approche du composant Razor

Injectez IJSRuntime dans le composant et appelez une fonction d'assistance JavaScript pour initier le téléchargement. Le DotNetStreamReference diffuse les octets PDF sans charger l'entièreté du fichier dans la mémoire JavaScript d'un coup :

@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>");
        // Stream the PDF bytes to the browser as a downloadable file
        using var streamRef = new DotNetStreamReference(stream: new MemoryStream(pdf.BinaryData));
        await JSRuntime.InvokeVoidAsync("downloadFileFromStream", "invoice.pdf", streamRef);
    }
}

Ajoutez cette fonction JavaScript à votre fichier _Host.cshtml ou App.razor, comme décrit dans la documentation d'interopération JavaScript de Blazor de Microsoft :

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);
};
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);
};
JAVASCRIPT

Exemple de C# de haut niveau

Dans un point d'API côté serveur, renvoyez directement les octets PDF en utilisant Results.File. Le navigateur reçoit le fichier avec les en-têtes Content-Disposition corrects et déclenche automatiquement le téléchargement :

using IronPdf;

// ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
    // Return with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "invoice.pdf");
});
using IronPdf;

// ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
    // Return with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "invoice.pdf");
});
$vbLabelText   $csharpLabel

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

Générer des PDFs depuis du HTML offre un contrôle complet sur la mise en page, la liaison de données et le style. Cette approche convient aux factures, rapports et tout document construit à partir de données d'application en direct. Pour des techniques de rendu plus avancées, consultez le guide de conversion de HTML en PDF.

Approche du composant Razor

Le composant ci-dessous construit une chaîne HTML de facture à partir de données en C# et la convertit en PDF. Le ChromePdfRenderer traite la chaîne HTML de la même manière qu'une page Web, appliquant tout le CSS et la rendant avec le moteur Chrome :

@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-2025-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>$749</td><td>$749</td>
                        </tr>
                        <tr>
                            <td>Priority Support</td><td>1</td><td>$250</td><td>$250</td>
                        </tr>
                    </tbody>
                </table>
                <p class='total'>Total Amount: $999</p>
            </body>
            </html>";

        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync(invoiceHtml);
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

Exemple de C# de haut niveau

La même approche de chaîne HTML fonctionne dans tout contexte .NET, y compris les applications console, les services en arrière-plan et les points d'API. L'interpolation de chaînes en C# ou une bibliothèque de templates insère des données dynamiques avant de transmettre la chaîne au moteur de rendu :

using IronPdf;

var html = """
    <html>
    <body>
        <h1>Invoice #INV-2025-001</h1>
        <table>
            <tr><th>Item</th><th>Total</th></tr>
            <tr><td>IronPDF License</td><td>$749</td></tr>
            <tr><td>Priority Support</td><td>$250</td></tr>
        </table>
        <p><strong>Total: $999</strong></p>
    </body>
    </html>
    """;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync(html);
pdf.SaveAs("invoice.pdf");
using IronPdf;

var html = """
    <html>
    <body>
        <h1>Invoice #INV-2025-001</h1>
        <table>
            <tr><th>Item</th><th>Total</th></tr>
            <tr><td>IronPDF License</td><td>$749</td></tr>
            <tr><td>Priority Support</td><td>$250</td></tr>
        </table>
        <p><strong>Total: $999</strong></p>
    </body>
    </html>
    """;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync(html);
pdf.SaveAs("invoice.pdf");
$vbLabelText   $csharpLabel

RenderHtmlAsPdfAsync accepte toute chaîne HTML valide, y compris le CSS en ligne et le JavaScript intégré. L'implémentation gère automatiquement la mise en page, le rendu des polices et les sauts de page.

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

En quoi un visualiseur PDF Blazor Server diffère-t-il de Blazor WebAssembly?

Le modèle d'hébergement détermine où la génération de PDF s'exécute et comment les octets atteignent le navigateur. Comprendre cette distinction prévient une erreur architecturale commune lors de la construction de visualiseurs PDF Blazor.

Blazor Server exécute tout le code C# sur le serveur. ChromePdfRenderer s'exécute côté serveur, et les octets résultants sont poussés vers le navigateur via la connexion SignalR existante. C'est le chemin d'intégration le plus simple, ne nécessitant aucun point d'API supplémentaire ou appels réseau au-delà de ce qui est indiqué dans les sections précédentes.

Blazor WebAssembly exécute le C# dans le bac à sable du navigateur en utilisant WASM. Le moteur de rendu d'IronPDF dépend de binaires natifs qui ne peuvent pas s'exécuter à l'intérieur du bac à sable du navigateur, donc ChromePdfRenderer n'est pas disponible directement dans un projet WASM. La bonne approche consiste à appeler un point d'API côté serveur qui effectue la génération de PDF et retourne les octets en réponse.

Configurer une API de génération de PDF pour Blazor WebAssembly

Sur le serveur, définissez un point d'API minimal qui génère et retourne le PDF :

// Program.cs (ASP.NET Core host project)
using IronPdf;

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";

app.MapGet("/api/pdf/report", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Quarterly Report</h1><p>Generated server-side.</p>");
    // Return PDF bytes with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "report.pdf");
});
// Program.cs (ASP.NET Core host project)
using IronPdf;

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";

app.MapGet("/api/pdf/report", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Quarterly Report</h1><p>Generated server-side.</p>");
    // Return PDF bytes with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "report.pdf");
});
$vbLabelText   $csharpLabel

Sur le client WASM, injectez HttpClient et appelez le point d'API. Le modèle de projet Blazor WASM hébergé préconfigure HttpClient pour cibler l'adresse de base du serveur :

@page "/wasm-pdf-viewer"
@inject HttpClient Http

<h3>PDF Viewer</h3>
<button @onclick="LoadPdf" class="btn btn-primary">Load Report</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task LoadPdf()
    {
        // Fetch PDF bytes from the server-side generation endpoint
        var bytes = await Http.GetByteArrayAsync("/api/pdf/report");
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(bytes)}";
    }
}

Ce modèle garde tout le travail de rendu lourd sur le serveur pendant que le client WASM ne gère que l'affichage. Pour une utilisation en production, ajoutez une authentification au point d'API et cadrez le contenu PDF généré aux données de l'utilisateur authentifié.

Quelles autres opérations PDF puis-je effectuer ?

L'API d'IronPDF va bien au-delà de l'affichage de base. Les sections suivantes couvrent quatre opérations couramment nécessaires dans les flux de documents Blazor : fusionner plusieurs documents, ajouter des annotations, appliquer une protection par mot de passe, et afficher des fichiers téléversés par l'utilisateur.

Comment fusionner plusieurs documents PDF ?

La fusion combine plusieurs instances PdfDocument en un seul fichier, utile pour assembler des sections de rapport, ajouter des annexes ou concaténer des fichiers sélectionnés par l'utilisateur. Le guide de fusion et de fractionnement de PDFs couvre les opérations d'insertion de page et de fractionnement.

using IronPdf;

var renderer = new ChromePdfRenderer();

// Generate two separate sections as individual PDF documents
var section1 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 1: Overview</h1>");
var section2 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 2: Details</h1>");

// Merge into a single document preserving all pages
var merged = PdfDocument.Merge(section1, section2);
merged.SaveAs("combined-report.pdf");
using IronPdf;

var renderer = new ChromePdfRenderer();

// Generate two separate sections as individual PDF documents
var section1 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 1: Overview</h1>");
var section2 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 2: Details</h1>");

// Merge into a single document preserving all pages
var merged = PdfDocument.Merge(section1, section2);
merged.SaveAs("combined-report.pdf");
$vbLabelText   $csharpLabel

Pour afficher le document fusionné dans un composant Blazor, passez merged.BinaryData au modèle d'URI de données base64 des sections précédentes. L'objet PdfDocument fusionné accepte également d'autres opérations (ajout de filigrane, paramètres de sécurité ou ajouts de pages supplémentaires) avant d'être codé pour l'affichage.

Comment ajouter des annotations à un PDF ?

Les annotations attachent des notes et des commentaires de réviseur à des emplacements de page spécifiques sans modifier le contenu sous-jacent du document. IronPDF prend en charge les annotations textuelles, les boîtes de texte libre et d'autres types de balisage. Consultez le guide des annotations pour la liste complète des propriétés d'annotation.

using IronPdf;
using IronPdf.Annotations;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Contract Document</h1><p>Review required on clause 3.</p>");

// Add a text annotation to page 0 at position (50, 650)
var annotation = new TextAnnotation(pageIndex: 0)
{
    Title = "Reviewer Note",
    Contents = "Please confirm clause 3 before signing.",
    X = 50,
    Y = 650,
    Width = 200,
    Height = 50,
    Printable = false,
    OpenByDefault = true
};

pdf.Annotations.Add(annotation);
pdf.SaveAs("annotated-contract.pdf");
using IronPdf;
using IronPdf.Annotations;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Contract Document</h1><p>Review required on clause 3.</p>");

// Add a text annotation to page 0 at position (50, 650)
var annotation = new TextAnnotation(pageIndex: 0)
{
    Title = "Reviewer Note",
    Contents = "Please confirm clause 3 before signing.",
    X = 50,
    Y = 650,
    Width = 200,
    Height = 50,
    Printable = false,
    OpenByDefault = true
};

pdf.Annotations.Add(annotation);
pdf.SaveAs("annotated-contract.pdf");
$vbLabelText   $csharpLabel

Les annotations sont préservées lorsque le PDF est ouvert dans n'importe quel visualiseur standard, y compris l'affichage <iframe> du navigateur. Pour les applications Blazor, exécutez la logique d'annotation côté serveur et renvoyez pdf.BinaryData au composant pour l'affichage.

Comment appliquer une protection par mot de passe à un PDF ?

La protection par mot de passe restreint l'accès aux documents sensibles comme les rapports financiers ou les dossiers RH. IronPDF prend en charge les mots de passe utilisateur (nécessaires pour ouvrir le document) et les mots de passe propriétaire (nécessaires pour modifier les autorisations). Le guide de sécurité des PDFs répertorie tous les indicateurs d'autorisation disponibles.

using IronPdf;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Confidential Report</h1>");

// Set the password required to open the document
pdf.Password = "user-open-password";
// Set the owner password to control editing and printing rights
pdf.SecuritySettings.OwnerPassword = "owner-edit-password";
pdf.SecuritySettings.AllowUserPrinting = IronPdf.Security.PdfPrintSecurity.FullPrintRights;
pdf.SecuritySettings.AllowUserCopyPasteContent = false;

pdf.SaveAs("protected-report.pdf");
using IronPdf;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Confidential Report</h1>");

// Set the password required to open the document
pdf.Password = "user-open-password";
// Set the owner password to control editing and printing rights
pdf.SecuritySettings.OwnerPassword = "owner-edit-password";
pdf.SecuritySettings.AllowUserPrinting = IronPdf.Security.PdfPrintSecurity.FullPrintRights;
pdf.SecuritySettings.AllowUserCopyPasteContent = false;

pdf.SaveAs("protected-report.pdf");
$vbLabelText   $csharpLabel

Les PDFs protégés par mot de passe affichent une invite de mot de passe dans l'affichage <iframe> du navigateur. Cette approche fonctionne pour les documents distribués via téléchargement; pour un affichage en ligne sans invite, appliquez le mot de passe uniquement aux documents retournés par la voie de téléchargement.

Comment afficher des PDFs téléchargés par l'utilisateur ?

Afficher un PDF qu'un utilisateur a téléchargé nécessite de lire les octets de fichier entrants et de les encoder en tant qu'URI de données. Le composant de téléchargement ci-dessous utilise le contrôle InputFile de Blazor pour capturer le fichier, puis l'affiche directement sans aucun rendu supplémentaire :

@page "/upload-viewer"
@using IronPdf

<h3>Upload and View a PDF</h3>
<InputFile OnChange="LoadUploadedPdf" accept=".pdf" />
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task LoadUploadedPdf(InputFileChangeEventArgs e)
    {
        using var stream = e.File.OpenReadStream(maxAllowedSize: 10 * 1024 * 1024);
        using var ms = new MemoryStream();
        await stream.CopyToAsync(ms);
        var bytes = ms.ToArray();
        // Encode the uploaded PDF bytes directly for display
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(bytes)}";
    }
}

Pour les PDFs téléchargés nécessitant un traitement côté serveur avant l'affichage, tel que l'application de filigrane, l'extraction de page ou le chiffrement, chargez les octets dans un PdfDocument en premier lieu:

var pdf = new PdfDocument(bytes);
// Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
var pdf = new PdfDocument(bytes);
// Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
$vbLabelText   $csharpLabel

Cela maintient la même structure de composant tout en permettant l'utilisation complète de l'API IronPDF sur le fichier téléchargé.

Quelles sont mes prochaines étapes ?

Ce guide a couvert le flux de travail complet pour un visualiseur PDF Blazor avec IronPDF : installation sur .NET 10, rendu d'URL et de HTML, personnalisation de la sortie avec en-têtes et pieds de page, interopération JavaScript pour le téléchargement par navigateur, la différence architecturale entre Blazor Server et Blazor WebAssembly, et quatre opérations sur les documents : fusion, annotations, protection par mot de passe et téléversements d'utilisateur.

Pour étendre cette base, explorez ces ressources :

Obtenez votre licence d'essai gratuite pour supprimer les filigranes et tester IronPDF sur votre application Blazor. IronPDF prend en charge .NET 10, ASP.NET Core, Blazor Server, et les projets Blazor WebAssembly hébergés sans configuration supplémentaire. Pour des conseils d'intégration supplémentaires, consultez la documentation officielle de Blazor de Microsoft.

Questions Fréquemment Posées

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

Un visualiseur PDF Blazor est un composant qui affiche les documents PDF en ligne dans une application Blazor Server ou WebAssembly. Il convertit généralement les octets PDF en un URI de données base64 et les rend à l'intérieur d'un élément iframe, donnant aux utilisateurs une barre d'outils de navigateur intégrée pour le zoom, la navigation et l'impression.

Comment afficher un PDF dans une application Blazor Server ?

Installez IronPDF via NuGet, ajoutez votre clé de licence à Program.cs, puis utilisez ChromePdfRenderer pour générer les octets PDF à partir d'une URL ou d'une chaîne HTML. Encodez les octets en un URI de données base64 et affectez-le à l'attribut src d'un iframe dans votre composant Razor.

IronPDF peut-il fonctionner dans un projet Blazor WebAssembly ?

Le moteur de rendu d'IronPDF nécessite des binaires natifs qui ne peuvent pas s'exécuter dans le bac à sable WASM du navigateur. Pour les projets Blazor WebAssembly, créez un point de terminaison API ASP.NET Core côté serveur qui génère le PDF avec IronPDF et renvoie les octets. Le client WASM appelle ce point de terminaison via HttpClient et affiche le résultat.

Comment déclencher un téléchargement PDF dans Blazor ?

Injectez IJSRuntime dans votre composant, générez des octets PDF avec IronPDF, enveloppez-les dans un DotNetStreamReference, et appelez une fonction JavaScript en utilisant InvokeVoidAsync. La fonction JavaScript crée une URL de Blob et clique sur un élément d'ancre pour déclencher le téléchargement par le navigateur.

Quels sont les avantages d'utiliser IronPDF pour la visualisation de PDF dans Blazor ?

IronPDF utilise un moteur de rendu basé sur Chrome qui convertit avec précision le rendu HTML, CSS et JavaScript en format PDF. Il est compatible avec .NET 10, fonctionne dans les architectures Blazor Server et WebAssembly, et fournit une API unique pour la génération PDF, la fusion, les annotations, la protection par mot de passe, et le traitement des téléchargements utilisateur.

Comment ajouter des en-têtes et pieds de page à un PDF généré dans Blazor ?

Définissez la propriété RenderingOptions sur ChromePdfRenderer avant d'appeler une méthode de rendu. Utilisez TextHeader et TextFooter pour des en-têtes et pieds de page en texte brut avec des variables de modèle comme {page}, {total-pages}, et {date}. Pour des mises en page basées sur HTML, utilisez HtmlHeader et HtmlFooter à la place.

Comment fusionner plusieurs documents PDF dans Blazor ?

Générez chaque document en tant qu'instance PdfDocument en utilisant ChromePdfRenderer, puis appelez PdfDocument.Merge(pdf1, pdf2) pour les combiner. Passez les BinaryData du document fusionné à l'URI de données base64 de votre composant Blazor pour afficher le résultat combiné.

Puis-je afficher un PDF téléchargé par un utilisateur dans Blazor sans l'enregistrer sur le disque ?

Oui. Utilisez le composant InputFile de Blazor pour lire le fichier téléchargé dans un MemoryStream, convertissez les octets en URI de données base64, et affectez-le à l'attribut src d'un iframe. Aucun enregistrement sur le système de fichiers n'est requis. Pour le traitement côté serveur, chargez les octets dans une instance PdfDocument avant de les encoder.

Comment appliquer une protection par mot de passe à un PDF généré dans Blazor ?

Après avoir généré le PdfDocument, définissez la propriété Password pour le mot de passe utilisateur et utilisez SecuritySettings.OwnerPassword pour le mot de passe propriétaire. Utilisez SecuritySettings.AllowUserPrinting et AllowUserCopyPasteContent pour contrôler les autorisations avant de sauvegarder ou d'encoder le document.

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

Oui. IronPDF prend en charge .NET 10, .NET 9, .NET 8, .NET 6, et .NET Framework 4.6.2 et versions ultérieures. Aucune configuration spéciale n'est requise pour utiliser IronPDF dans une application Blazor ciblant .NET 10.

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. Essai gratuit

Iron Support Team

We're online 24 hours, 5 days a week.
Chat
Email
Call Me