UTILISATION DE IRONPDF

Comment afficher un PDF dans Blazor (Guide)

Publié:octobre 27, 2025

Introduction

La fonctionnalité d'affichage de PDF dans Blazor dans les applications web modernes nécessite un composant de visualisation PDF robuste qui dépasse les capacités de base du navigateur. For .NET developers building Blazor applications, IronPDF provides a powerful PDF viewer solution that seamlessly integrates with your Blazor Server app. Cela vous permet d'afficher des documents PDF avec de hautes performances et des fonctionnalités riches sans dépendre d'outils de navigateur tiers.

Dans ce tutoriel, nous explorerons comment implémenter un visualiseur PDF Blazor à l'aide d'IronPDF, créant un composant de visualisation PDF qui peut ouvrir des fichiers PDF, gérer le contenu PDF et offrir aux utilisateurs une interface intuitive pour afficher les PDF sur les ordinateurs de bureau et les téléphones mobiles.

Commencer à afficher des PDF avec IronPDF

Avant d'implémenter votre visualiseur PDF Blazor, vous devrez installer IronPDF. Ajoutez-le à votre application Blazor Server via NuGet :

Install-Package IronPdf

Ensuite, créez une nouvelle application Blazor et assurez-vous d'avoir la dernière version de .NET Core installée. Stockez vos fichiers PDF dans le dossier wwwroot pour un accès facile, ou préparez-vous à les charger à partir d'autres sources comme des tableaux d'octets ou des URL.

Créer votre premier composant de visualisation PDF Blazor

Construi sons un composant de visualisation PDF Blazor de base qui peut afficher des documents PDF. Tout d'abord, créez un nouveau composant Razor :

@page "/pdfviewer"
@rendermode InteractiveServer
@using IronPdf
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment
<h3>PDF Viewer Component</h3>
<div>
    <button @onclick="LoadPdfDocument">Open File</button>
    <div id="pdfContainer">
        @if (!string.IsNullOrEmpty(pdfUrl))
        {
            <iframe src="@pdfUrl" style="width:100%; height:600px;"></iframe>
        }
    </div>
</div>
@code {
    private string pdfUrl = "";
    private byte[] pdfData;
    private async Task LoadPdfDocument()
    {
        // Load PDF from file
        var pdfDocument = PdfDocument.FromFile("wwwroot/sample.pdf");
        pdfData = pdfDocument.BinaryData;
        // Create object URL for display
        pdfUrl = await CreateObjectUrl(pdfData);
    }
    private async Task<string> CreateObjectUrl(byte[] data)
    {
        var base64 = Convert.ToBase64String(data);
        return $"data:application/pdf;base64,{base64}";
    }
}

@page "/pdfviewer"
@rendermode InteractiveServer
@using IronPdf
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment
<h3>PDF Viewer Component</h3>
<div>
    <button @onclick="LoadPdfDocument">Open File</button>
    <div id="pdfContainer">
        @if (!string.IsNullOrEmpty(pdfUrl))
        {
            <iframe src="@pdfUrl" style="width:100%; height:600px;"></iframe>
        }
    </div>
</div>
@code {
    private string pdfUrl = "";
    private byte[] pdfData;
    private async Task LoadPdfDocument()
    {
        // Load PDF from file
        var pdfDocument = PdfDocument.FromFile("wwwroot/sample.pdf");
        pdfData = pdfDocument.BinaryData;
        // Create object URL for display
        pdfUrl = await CreateObjectUrl(pdfData);
    }
    private async Task<string> CreateObjectUrl(byte[] data)
    {
        var base64 = Convert.ToBase64String(data);
        return $"data:application/pdf;base64,{base64}";
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

$vbLabelText $csharpLabel

Ce code crée un composant de visionneuse PDF simple qui charge un document PDF et l'affiche à l'aide d'un iframe. La méthode LoadPdfDocument lit les fichiers PDF depuis le même chemin (dossier wwwroot) et les convertit en un tableau d'octets. La méthode CreateObjectUrl transforme ensuite ce tableau d'octets en une URL de données que l'iframe peut afficher, permettant aux utilisateurs de visualiser facilement le document PDF chargé.

Sortie

Comment afficher un PDF dans Blazor (Guide) : Figure 1

Implémenter l'interopérabilité JavaScript pour un affichage amélioré

Pour un meilleur contrôle de l'affichage du contenu PDF, nous pouvons utiliser des fonctions JavaScript pour gérer la fonctionnalité du visualiseur PDF :

@page "/pdf-jsinterop"
@rendermode InteractiveServer
@using IronPdf
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment
<h3>IronPDF JavaScript Interop Viewer</h3>
<p>Displays PDF using JavaScript's Blob/ObjectURL capabilities.</p>
@if (!string.IsNullOrEmpty(ErrorMessage))
{
    <div class="alert alert-danger">Error: @ErrorMessage</div>
}
<div id="@documentId" style="border: 1px solid #ccc; width: 100%; min-height: 600px;">
    Loading PDF...
</div>
@code {
    private string documentId = Guid.NewGuid().ToString();
    private string ErrorMessage = string.Empty;
    private bool pdfLoaded = false;
    // Hold the reference to the loaded JavaScript module
    private IJSObjectReference? jsModule;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !pdfLoaded)
        {
            try
            {
                // 1. Asynchronously load the JavaScript file as a module
                // This guarantees the script is loaded before the next line executes.
                jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import",
                    "./pdfViewerInterop.js");
                await LoadPdfWithJavaScript();
                pdfLoaded = true;
            }
            catch (Exception ex)
            {
                ErrorMessage = $"Failed to load JS module or execute: {ex.Message}";
            }
            finally
            {
                StateHasChanged();
            }
        }
    }
    private async Task LoadPdfWithJavaScript()
    {
        if (jsModule is null) return; // Should never happen if the module loads successfully
        try
        {
            var pdfPath = Path.Combine(WebHostEnvironment.WebRootPath, "sample.pdf");
            if (!File.Exists(pdfPath))
            {
                ErrorMessage = $"File not found: {pdfPath}";
                return;
            }
            var pdf = PdfDocument.FromFile(pdfPath);
            var stream = new MemoryStream(pdf.BinaryData);
            // 2. Invoke the function using the module reference
            // Note: We only pass the function name here.
            await jsModule.InvokeVoidAsync("displayPdf",
                documentId, stream.ToArray());
        }
        catch (Exception ex)
        {
            ErrorMessage = $"Failed to load PDF or invoke JS: {ex.Message}";
        }
    }
    // IMPORTANT: Dispose of the module when the component is removed
    public async ValueTask DisposeAsync()
    {
        if (jsModule is not null)
        {
            await jsModule.DisposeAsync();
        }
    }
}

@page "/pdf-jsinterop"
@rendermode InteractiveServer
@using IronPdf
@inject IJSRuntime JSRuntime
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment
<h3>IronPDF JavaScript Interop Viewer</h3>
<p>Displays PDF using JavaScript's Blob/ObjectURL capabilities.</p>
@if (!string.IsNullOrEmpty(ErrorMessage))
{
    <div class="alert alert-danger">Error: @ErrorMessage</div>
}
<div id="@documentId" style="border: 1px solid #ccc; width: 100%; min-height: 600px;">
    Loading PDF...
</div>
@code {
    private string documentId = Guid.NewGuid().ToString();
    private string ErrorMessage = string.Empty;
    private bool pdfLoaded = false;
    // Hold the reference to the loaded JavaScript module
    private IJSObjectReference? jsModule;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !pdfLoaded)
        {
            try
            {
                // 1. Asynchronously load the JavaScript file as a module
                // This guarantees the script is loaded before the next line executes.
                jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import",
                    "./pdfViewerInterop.js");
                await LoadPdfWithJavaScript();
                pdfLoaded = true;
            }
            catch (Exception ex)
            {
                ErrorMessage = $"Failed to load JS module or execute: {ex.Message}";
            }
            finally
            {
                StateHasChanged();
            }
        }
    }
    private async Task LoadPdfWithJavaScript()
    {
        if (jsModule is null) return; // Should never happen if the module loads successfully
        try
        {
            var pdfPath = Path.Combine(WebHostEnvironment.WebRootPath, "sample.pdf");
            if (!File.Exists(pdfPath))
            {
                ErrorMessage = $"File not found: {pdfPath}";
                return;
            }
            var pdf = PdfDocument.FromFile(pdfPath);
            var stream = new MemoryStream(pdf.BinaryData);
            // 2. Invoke the function using the module reference
            // Note: We only pass the function name here.
            await jsModule.InvokeVoidAsync("displayPdf",
                documentId, stream.ToArray());
        }
        catch (Exception ex)
        {
            ErrorMessage = $"Failed to load PDF or invoke JS: {ex.Message}";
        }
    }
    // IMPORTANT: Dispose of the module when the component is removed
    public async ValueTask DisposeAsync()
    {
        if (jsModule is not null)
        {
            await jsModule.DisposeAsync();
        }
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

$vbLabelText $csharpLabel

Ajoutez cette fonction JavaScript à votre fichier JavaScript dans le dossier wwwroot :

export function displayPdf(elementId, data) {
    // 1. Create a Blob from the byte array data
    const blob = new Blob([new Uint8Array(data)],
        { type: 'application/pdf' });
    // 2. Create a temporary URL for the Blob
    const url = URL.createObjectURL(blob);
    // 3. Find the container element
    const container = document.getElementById(elementId);
    if (!container) return;
    // 4. Clear any previous content
    container.innerHTML = '';
    // 5. Create and configure the iframe
    const iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.style.width = '100%';
    iframe.style.height = '600px';
    iframe.style.border = 'none';
    // 6. Append the iframe to the container
    container.appendChild(iframe);
}

export function displayPdf(elementId, data) {
    // 1. Create a Blob from the byte array data
    const blob = new Blob([new Uint8Array(data)],
        { type: 'application/pdf' });
    // 2. Create a temporary URL for the Blob
    const url = URL.createObjectURL(blob);
    // 3. Find the container element
    const container = document.getElementById(elementId);
    if (!container) return;
    // 4. Clear any previous content
    container.innerHTML = '';
    // 5. Create and configure the iframe
    const iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.style.width = '100%';
    iframe.style.height = '600px';
    iframe.style.border = 'none';
    // 6. Append the iframe to the container
    container.appendChild(iframe);
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

$vbLabelText $csharpLabel

Cette fonction JavaScript crée un blob à partir des données PDF et génère une URL d'objet. Elle crée ensuite dynamiquement un élément iframe et l'ajoute au conteneur. Cette approche vous donne plus de contrôle sur la façon dont les pages PDF sont affichées et permet une meilleure gestion du cycle de vie du composant de visualisation PDF.

Sortie

Comment afficher un PDF dans Blazor (Guide) : Figure 2 - Visualiseur PDF JavaScript

Charger des fichiers PDF de différentes sources

Votre visionneuse PDF Blazor peut récupérer et afficher des documents PDF de diverses sources :

private async Task LoadFromUrl()
{
    var client = new HttpClient();
    var response = await client.GetAsync("https://example.com/file.pdf");
    var stream = await response.Content.ReadAsStreamAsync();
    var pdfDocument = new PdfDocument(stream);
    await DisplayPdfContent(pdfDocument);
}
private async Task LoadFromHtmlContent()
{
    var renderer = new ChromePdfRenderer();
    var htmlContent = "<h1>Generated PDF</h1>";
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    await DisplayPdfContent(pdfDocument);
}
private async Task DisplayPdfContent(PdfDocument document)
{
    var data = document.BinaryData;
    pdfUrl = $"data:application/pdf;base64,{Convert.ToBase64String(data)}";
}

private async Task LoadFromUrl()
{
    var client = new HttpClient();
    var response = await client.GetAsync("https://example.com/file.pdf");
    var stream = await response.Content.ReadAsStreamAsync();
    var pdfDocument = new PdfDocument(stream);
    await DisplayPdfContent(pdfDocument);
}
private async Task LoadFromHtmlContent()
{
    var renderer = new ChromePdfRenderer();
    var htmlContent = "<h1>Generated PDF</h1>";
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    await DisplayPdfContent(pdfDocument);
}
private async Task DisplayPdfContent(PdfDocument document)
{
    var data = document.BinaryData;
    pdfUrl = $"data:application/pdf;base64,{Convert.ToBase64String(data)}";
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

$vbLabelText $csharpLabel

Ces méthodes démontrent le chargement de fichiers PDF à partir d'URL utilisant HTTPS, la conversion de contenu HTML en PDF et l'affichage du contenu PDF résultant. La méthode LoadFromUrl récupère des documents PDF depuis des emplacements distants, tandis que LoadFromHtmlContent montre comment convertir du HTML en PDF à la volée, offrant ainsi de la flexibilité quant à la manière dont votre composant de visualisation PDF Blazor source son contenu.

Sortie using HTML Content

Comment afficher un PDF dans Blazor (Guide) : Figure 3 - PDF généré à partir de HTML et affiché

Ajouter des fonctionnalités interactives

Améliorez votre visionneuse PDF avec des fonctionnalités interactives :

@code {
    private int currentPage = 1;
    private int totalPages;
    private string rotationClass = "";
    private async Task NavigateToPage(int page)
    {
        currentPage = page;
        await JSRuntime.InvokeVoidAsync("navigateTo", page);
    }
    private void RotateCounterclockwise()
    {
        // Counterclockwise switch orientation
        rotationClass = "rotate-270";
    }
    private async Task PrintPdf()
    {
        await JSRuntime.InvokeVoidAsync("printDocument", documentId);
    }
    private async Task DownloadPdf()
    {
        var fileName = "document.pdf";
        await JSRuntime.InvokeVoidAsync("downloadFile", 
           pdfData, fileName);
    }
}

@code {
    private int currentPage = 1;
    private int totalPages;
    private string rotationClass = "";
    private async Task NavigateToPage(int page)
    {
        currentPage = page;
        await JSRuntime.InvokeVoidAsync("navigateTo", page);
    }
    private void RotateCounterclockwise()
    {
        // Counterclockwise switch orientation
        rotationClass = "rotate-270";
    }
    private async Task PrintPdf()
    {
        await JSRuntime.InvokeVoidAsync("printDocument", documentId);
    }
    private async Task DownloadPdf()
    {
        var fileName = "document.pdf";
        await JSRuntime.InvokeVoidAsync("downloadFile", 
           pdfData, fileName);
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

$vbLabelText $csharpLabel

Ce code ajoute la navigation entre les pages PDF, la fonction de rotation (y compris la rotation anti-horaire) et la possibilité d'imprimer des PDF. La fonctionnalité de téléchargement permet aux utilisateurs d'enregistrer des fichiers PDF localement. Ces caractéristiques transforment votre visionneuse PDF basique en une visionneuse PDF puissante avec une barre d'outils intégrée qui fournit des fonctionnalités essentielles pour les utilisateurs travaillant avec des documents PDF.

Sortie

Comment afficher un PDF dans Blazor (Guide) : Figure 4 - Visionneuse PDF avec fonctionnalités interactives personnalisées

Gestion du remplissage de formulaire PDF et des annotations

Pour les documents PDF contenant des champs de formulaire et des annotations, IronPDF offre un support solide :

private async Task ProcessFormFields(
{
    var pdfDocument = PdfDocument.FromFile("form.pdf");
    foreach (var field in pdfDocument.Form.Fields)
    {
        if (field.Type == PdfFormFieldType.Text)
        {
            field.Value = "User Input";
        }
    }
    // Enable form filling in viewer
    var modifiedPdf = pdfDocument.BinaryData;
    await DisplayPdfContent(pdfDocument);
}

private async Task ProcessFormFields(
{
    var pdfDocument = PdfDocument.FromFile("form.pdf");
    foreach (var field in pdfDocument.Form.Fields)
    {
        if (field.Type == PdfFormFieldType.Text)
        {
            field.Value = "User Input";
        }
    }
    // Enable form filling in viewer
    var modifiedPdf = pdfDocument.BinaryData;
    await DisplayPdfContent(pdfDocument);
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

$vbLabelText $csharpLabel

Cela permet des capacités de remplissage de formulaires au sein de votre composant de visualisation PDF Blazor, permettant aux utilisateurs d'interagir directement avec les champs de formulaire dans le navigateur. Le code parcourt les champs de formulaire dans le document PDF et peut définir des valeurs de manière programmatique, ce qui est idéal pour les applications nécessitant un remplissage dynamique des formulaires.

Sortie

Comment afficher un PDF dans Blazor (Guide) : Figure 5 - Afficher PDF avec remplissage de formulaire

Optimisation des performances

Pour assurer des performances de haute qualité lors de l'affichage des PDF, en particulier pour les fichiers PDF volumineux :

private async Task LoadLargePdf()
{
    const int chunkSize = 1024 * 1024; // 1MB chunks
    var pdfPath = "largefile.pdf";
    using (var fileStream = File.OpenRead(pdfPath))
    {
        var buffer = new byte[chunkSize];
        var chunks = new List<byte[]>();
        int bytesRead;
        while ((bytesRead = await fileStream.ReadAsync(buffer)) > 0)
        {
            var chunk = new byte[bytesRead];
            Array.Copy(buffer, chunk, bytesRead);
            chunks.Add(chunk);
        }
        // Process chunks for display
        await ProcessPdfChunks(chunks);
    }
}

private async Task LoadLargePdf()
{
    const int chunkSize = 1024 * 1024; // 1MB chunks
    var pdfPath = "largefile.pdf";
    using (var fileStream = File.OpenRead(pdfPath))
    {
        var buffer = new byte[chunkSize];
        var chunks = new List<byte[]>();
        int bytesRead;
        while ((bytesRead = await fileStream.ReadAsync(buffer)) > 0)
        {
            var chunk = new byte[bytesRead];
            Array.Copy(buffer, chunk, bytesRead);
            chunks.Add(chunk);
        }
        // Process chunks for display
        await ProcessPdfChunks(chunks);
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

$vbLabelText $csharpLabel

Cette approche charge de gros fichiers PDF par morceaux, évitant les problèmes de mémoire et assurant des performances fluides même avec des documents PDF volumineux. C'est particulièrement utile lorsqu'il s'agit de fichiers PDF sur des téléphones mobiles ou des appareils avec des ressources limitées.

Considérations de sécurité pour votre application Blazor

Lorsque vous travaillez avec des fichiers PDF protégés par mot de passe :

private async Task LoadSecurePdf(string password)
{
    var pdfDocument = PdfDocument.FromFile("secure.pdf", password);
    if (pdfDocument != null)
    {
       var headers = new Dictionary<string, string>
        {
            {"X-Frame-Options", "SAMEORIGIN"},
            {"Content-Security-Policy", "default-src 'self'"}
        };
        await DisplayPdfContent(pdfDocument);
    }
}

private async Task LoadSecurePdf(string password)
{
    var pdfDocument = PdfDocument.FromFile("secure.pdf", password);
    if (pdfDocument != null)
    {
       var headers = new Dictionary<string, string>
        {
            {"X-Frame-Options", "SAMEORIGIN"},
            {"Content-Security-Policy", "default-src 'self'"}
        };
        await DisplayPdfContent(pdfDocument);
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

$vbLabelText $csharpLabel

Ce code montre comment charger des documents PDF protégés par mot de passe tout en maintenant la sécurité à travers une configuration appropriée des en-têtes.

Conclusion

Implémenter un visualiseur PDF Blazor avec IronPDF offre aux développeurs une solution complète pour afficher des PDF dans les applications web. Que ce soit pour un affichage basique ou des fonctionnalités avancées comme le remplissage de formulaire et les annotations, le composant de visualisation PDF d'IronPDF offre la fonctionnalité nécessaire pour des applications professionnelles.

Les exemples montrés démontrent comment créer un visualiseur PDF Blazor robuste capable de gérer diverses sources PDF, de fournir des fonctionnalités interactives et de maintenir des performances élevées. Que vous construisiez une visionneuse de documents simple ou un système de gestion de documents complexe, l'intégration d'IronPDF avec les applications Blazor Server facilite la mise en œuvre de capacités de visualisation PDF professionnelles.

Prêt à implémenter votre propre visionneuse PDF ? Commencez votre essai gratuit d'IronPDF aujourd'hui et accédez à une documentation complète, des applications de démonstration et un support développeur pour créer des expériences de visualisation PDF puissantes dans vos applications Blazor.

Questions Fréquemment Posées

Comment puis-je afficher un PDF dans une application Blazor en utilisant IronPDF ?

IronPDF fournit une API complète qui vous permet de rendre et d'afficher des PDF au sein des applications Blazor. En intégrant IronPDF, vous pouvez facilement implémenter un composant de visualisation PDF puissant.

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

L'utilisation d'IronPDF pour la visualisation de PDF dans Blazor offre des avantages tels que la gestion des champs de formulaire, la création de visualiseurs interactifs et le rendu de PDF de haute qualité de manière fluide dans votre application.

Est-il possible de gérer les champs de formulaire dans les PDFs en utilisant IronPDF dans Blazor ?

Oui, IronPDF vous permet de gérer et de manipuler les champs de formulaire au sein des documents PDF dans une application Blazor, offrant une interactivité et une implication utilisateur accrues.

IronPDF peut-il être utilisé pour créer des visualiseurs PDF interactifs dans Blazor ?

Absolument. IronPDF fournit des outils pour créer des visualiseurs PDF interactifs dans Blazor, permettant des fonctionnalités telles que la gestion des formulaires et l'affichage de contenu dynamique.

Quelles fonctionnalités IronPDF offre-t-il pour la manipulation de PDF dans Blazor ?

IronPDF offre des fonctionnalités telles que le rendu de PDF, la gestion des champs de formulaire, l'extraction de texte et la manipulation de pages, ce qui en fait un choix polyvalent pour les opérations PDF dans Blazor.

Comment IronPDF améliore-t-il les expériences de visualisation PDF dans les applications Blazor ?

IronPDF améliore l'expérience de visualisation PDF dans les applications Blazor en fournissant un rendu fluide, des fonctionnalités interactives et une gestion robuste des documents PDF.

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

Articles connexes

Publiénovembre 13, 2025

Comment fusionner deux tableaux d'octets PDF en C#

Fusionnez deux tableaux d'octets PDF en C# avec IronPDF. Apprenez à combiner plusieurs fichiers PDF à partir de tableaux d'octets, flux de mémoire et bases de données avec des exemples de code simples.

Publiénovembre 13, 2025

Comment créer un visualiseur PDF ASP.NET MVC

Construisez un visualiseur PDF puissant pour les applications ASP.NET MVC. Affichez des documents PDF, convertissez des vues en fichiers PDF, ajoutez des fonctionnalités interactives avec IronPDF.