Comment afficher un PDF dans Blazor

Pourquoi ai-je besoin d'un composant de visualisation PDF dans Blazor ?

L'affichage de fichiers PDF dans les applications web modernes nécessite un composant de visualisation fiable qui dépasse les capacités de base d'un navigateur. Pour les développeurs .NET qui créent des applications Blazor, IronPDF fournit une solution de visualisation PDF efficace qui s'intègre parfaitement à votre application Blazor Server . Cela vous permet d'afficher des documents PDF avec des performances élevées et de nombreuses fonctionnalités sans avoir recours à des outils tiers pour votre navigateur.

Dans ce tutoriel, nous verrons comment implémenter une visionneuse PDF Blazor à l'aide d'IronPDF, en créant un composant de visionneuse PDF capable d'ouvrir des fichiers PDF, de gérer leur contenu et de fournir aux utilisateurs une interface intuitive pour l'affichage des PDF sur les ordinateurs de bureau et les appareils mobiles . Le moteur de rendu Chrome garantit un affichage cohérent sur toutes les plateformes.

La nécessité d'un composant de visualisation PDF dédié devient évidente lorsqu'on prend en compte les limitations des navigateurs. La prise en charge native des fichiers PDF par les navigateurs varie considérablement d'un navigateur à l'autre et d'une plateforme à l'autre, ce qui entraîne des expériences utilisateur incohérentes. En intégrant une visionneuse PDF personnalisée à votre application Blazor , vous obtenez un contrôle total sur l'expérience de visualisation, garantissant ainsi une fonctionnalité cohérente sur toutes les plateformes. Ceci est particulièrement important pour les applications nécessitant des normes de conformité et des fonctionnalités de sécurité .

Comment 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 telles que des tableaux d'octets ou des URL. La présentation de l'installation fournit des instructions détaillées pour différents scénarios de déploiement.

Comment créer mon premier composant de visionneuse PDF Blazor ?

Construisons un composant Blazor qui affiche 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}";
    }
}

Imports IronPdf
Imports Microsoft.AspNetCore.Hosting
Imports Microsoft.AspNetCore.Components
Imports Microsoft.JSInterop

@page "/pdfviewer"
@rendermode InteractiveServer

@inject IJSRuntime JSRuntime
@inject IWebHostEnvironment WebHostEnvironment

<h3>PDF Viewer Component</h3>
<div>
    <button @onclick="LoadPdfDocument">Open File</button>
    <div id="pdfContainer">
        @If Not String.IsNullOrEmpty(pdfUrl) Then
            <iframe src="@pdfUrl" style="width:100%; height:600px;"></iframe>
        End If
    </div>
</div>

@code
    Private pdfUrl As String = ""
    Private pdfData As Byte()

    Private Async Function LoadPdfDocument() As Task
        ' Load PDF from file
        Dim pdfDocument = PdfDocument.FromFile("wwwroot/sample.pdf")
        pdfData = pdfDocument.BinaryData
        ' Create object URL for display
        pdfUrl = Await CreateObjectUrl(pdfData)
    End Function

    Private Async Function CreateObjectUrl(data As Byte()) As Task(Of String)
        Dim base64 = Convert.ToBase64String(data)
        Return $"data:application/pdf;base64,{base64}"
    End Function
End Code

Ce code crée un composant de visualisation PDF simple qui charge un document PDF et l'affiche à l'aide d'une iframe. La méthode LoadPdfDocument lit les fichiers PDF du 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 ainsi aux utilisateurs de visualiser le document PDF chargé. Cette approche fonctionne bien avec différentes versions de PDF et prend en charge l'encodage UTF-8 .

Comment implémenter l'interopérabilité JavaScript pour améliorer l'affichage ?

Pour un meilleur contrôle de l'affichage du contenu PDF, nous pouvons utiliser des fonctions JavaScript pour gérer les fonctionnalités de la visionneuse 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();
        }
    }
}

Imports System
Imports System.IO
Imports System.Threading.Tasks
Imports IronPdf
Imports Microsoft.AspNetCore.Components
Imports Microsoft.AspNetCore.Components.Web
Imports Microsoft.JSInterop
Imports Microsoft.AspNetCore.Hosting

@page "/pdf-jsinterop"
@rendermode InteractiveServer

@inject IJSRuntime JSRuntime
@inject IWebHostEnvironment WebHostEnvironment

<h3>IronPDF JavaScript Interop Viewer</h3>
<p>Displays PDF using JavaScript's Blob/ObjectURL capabilities.</p>
@if Not String.IsNullOrEmpty(ErrorMessage) Then
    <div class="alert alert-danger">Error: @ErrorMessage</div>
End If
<div id="@documentId" style="border: 1px solid #ccc; width: 100%; min-height: 600px;">
    Loading PDF...
</div>

@code
    Private documentId As String = Guid.NewGuid().ToString()
    Private ErrorMessage As String = String.Empty
    Private pdfLoaded As Boolean = False
    ' Hold the reference to the loaded JavaScript module
    Private jsModule As IJSObjectReference

    Protected Overrides Async Function OnAfterRenderAsync(firstRender As Boolean) As Task
        If firstRender AndAlso Not pdfLoaded Then
            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(Of IJSObjectReference)("import", "./pdfViewerInterop.js")
                Await LoadPdfWithJavaScript()
                pdfLoaded = True
            Catch ex As Exception
                ErrorMessage = $"Failed to load JS module or execute: {ex.Message}"
            Finally
                StateHasChanged()
            End Try
        End If
    End Function

    Private Async Function LoadPdfWithJavaScript() As Task
        If jsModule Is Nothing Then Return ' Should never happen if the module loads successfully
        Try
            Dim pdfPath = Path.Combine(WebHostEnvironment.WebRootPath, "sample.pdf")
            If Not File.Exists(pdfPath) Then
                ErrorMessage = $"File not found: {pdfPath}"
                Return
            End If
            Dim pdf = PdfDocument.FromFile(pdfPath)
            Dim 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 ex As Exception
            ErrorMessage = $"Failed to load PDF or invoke JS: {ex.Message}"
        End Try
    End Function

    ' IMPORTANT: Dispose of the module when the component is removed
    Public Async Function DisposeAsync() As ValueTask Implements IAsyncDisposable.DisposeAsync
        If jsModule IsNot Nothing Then
            Await jsModule.DisposeAsync()
        End If
    End Function
End Code

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

The provided code is JavaScript, not C#. Therefore, it cannot be directly converted to VB.NET. However, if you have a C# code snippet that you would like to convert to VB.NET, please provide it, and I will assist you with the conversion.

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 offre un meilleur contrôle sur l'affichage des pages PDF et permet une meilleure gestion du cycle de vie du composant de visualisation PDF. Cette technique prend en charge le rendu JavaScript et les délais de rendu personnalisés pour les documents complexes.

try {
    // Check if the browser supports required features
    if (!window.Blob || !window.URL) {
        throw new Error("Browser doesn't support required PDF viewing features");
    }
    // Validate PDF data before processing
    if (!data || data.length === 0) {
        throw new Error("Invalid PDF data received");
    }
    // Monitor memory usage for large files
    if (data.length > 50 * 1024 * 1024) { // 50MB threshold
        console.warn("Large PDF detected, performance may be affected");
    }
} catch (error) {
    console.error("PDF viewing error:", error);
    // Fallback to server-side rendering
}

try {
    // Check if the browser supports required features
    if (!window.Blob || !window.URL) {
        throw new Error("Browser doesn't support required PDF viewing features");
    }
    // Validate PDF data before processing
    if (!data || data.length === 0) {
        throw new Error("Invalid PDF data received");
    }
    // Monitor memory usage for large files
    if (data.length > 50 * 1024 * 1024) { // 50MB threshold
        console.warn("Large PDF detected, performance may be affected");
    }
} catch (error) {
    console.error("PDF viewing error:", error);
    // Fallback to server-side rendering
}

Try
    ' Check if the browser supports required features
    If Not window.Blob OrElse Not window.URL Then
        Throw New Exception("Browser doesn't support required PDF viewing features")
    End If
    ' Validate PDF data before processing
    If data Is Nothing OrElse data.length = 0 Then
        Throw New Exception("Invalid PDF data received")
    End If
    ' Monitor memory usage for large files
    If data.length > 50 * 1024 * 1024 Then ' 50MB threshold
        Console.Warn("Large PDF detected, performance may be affected")
    End If
Catch error As Exception
    Console.Error.WriteLine("PDF viewing error: " & error.ToString())
    ' Fallback to server-side rendering
End Try

Comment puis-je charger des fichiers PDF provenant 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("___PROTECTED_URL_116___");
    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("___PROTECTED_URL_116___");
    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 Function LoadFromUrl() As Task
    Dim client = New HttpClient()
    Dim response = Await client.GetAsync("___PROTECTED_URL_116___")
    Dim stream = Await response.Content.ReadAsStreamAsync()
    Dim pdfDocument = New PdfDocument(stream)
    Await DisplayPdfContent(pdfDocument)
End Function

Private Async Function LoadFromHtmlContent() As Task
    Dim renderer = New ChromePdfRenderer()
    Dim htmlContent = "<h1>Generated PDF</h1>"
    Dim pdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
    Await DisplayPdfContent(pdfDocument)
End Function

Private Async Function DisplayPdfContent(document As PdfDocument) As Task
    Dim data = document.BinaryData
    pdfUrl = $"data:application/pdf;base64,{Convert.ToBase64String(data)}"
End Function

Ces méthodes illustrent le chargement de fichiers PDF à partir d'URL via 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 à partir d'emplacements distants, tandis que LoadFromHtmlContent montre comment convertir du HTML en PDF à la volée, offrant ainsi une flexibilité dans la manière dont votre composant de visualisation PDF Blazor s'approvisionne en contenu. Le moteur de rendu de Chrome garantit une conversion précise.

Les autres options de sources incluent :

• Azure Blob Storage pour le stockage de fichiers PDF dans le cloud
• Flux de bases de données pour un accès sécurisé aux documents
• Les fichiers Markdown sont convertis dynamiquement en PDF
• Documents XML transformés avec XSLT
• Fichiers RTF convertis à la demande

Pensez à convertir les documents Microsoft Word du format DOCX en PDF et les archives photographiques en PDF à partir d'images .

private async Task<PdfDocument> LoadFromUrlWithRetry(string url, int maxRetries = 3)
{
    for (int i = 0; i < maxRetries; i++)
    {
        try
        {
            using var client = new HttpClient();
            client.Timeout = TimeSpan.FromSeconds(30);

            var response = await client.GetAsync(url);
            response.EnsureSuccessStatusCode();

            var stream = await response.Content.ReadAsStreamAsync();
            return new PdfDocument(stream);
        }
        catch (HttpRequestException ex) when (i < maxRetries - 1)
        {
            await Task.Delay(TimeSpan.FromSeconds(Math.Pow(2, i))); // Exponential backoff
        }
    }
    throw new Exception($"Failed to load PDF from {url} after {maxRetries} attempts");
}

private async Task<PdfDocument> LoadFromUrlWithRetry(string url, int maxRetries = 3)
{
    for (int i = 0; i < maxRetries; i++)
    {
        try
        {
            using var client = new HttpClient();
            client.Timeout = TimeSpan.FromSeconds(30);

            var response = await client.GetAsync(url);
            response.EnsureSuccessStatusCode();

            var stream = await response.Content.ReadAsStreamAsync();
            return new PdfDocument(stream);
        }
        catch (HttpRequestException ex) when (i < maxRetries - 1)
        {
            await Task.Delay(TimeSpan.FromSeconds(Math.Pow(2, i))); // Exponential backoff
        }
    }
    throw new Exception($"Failed to load PDF from {url} after {maxRetries} attempts");
}

Imports System
Imports System.Net.Http
Imports System.Threading.Tasks

Private Async Function LoadFromUrlWithRetry(url As String, Optional maxRetries As Integer = 3) As Task(Of PdfDocument)
    For i As Integer = 0 To maxRetries - 1
        Try
            Using client As New HttpClient()
                client.Timeout = TimeSpan.FromSeconds(30)

                Dim response = Await client.GetAsync(url)
                response.EnsureSuccessStatusCode()

                Dim stream = Await response.Content.ReadAsStreamAsync()
                Return New PdfDocument(stream)
            End Using
        Catch ex As HttpRequestException When i < maxRetries - 1
            Await Task.Delay(TimeSpan.FromSeconds(Math.Pow(2, i))) ' Exponential backoff
        End Try
    Next
    Throw New Exception($"Failed to load PDF from {url} after {maxRetries} attempts")
End Function

Comment ajouter des fonctionnalités interactives à ma visionneuse PDF ?

Améliorez votre visionneuse PDF grâce à 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);
    }
}

Imports System.Threading.Tasks

Private currentPage As Integer = 1
Private totalPages As Integer
Private rotationClass As String = ""

Private Async Function NavigateToPage(page As Integer) As Task
    currentPage = page
    Await JSRuntime.InvokeVoidAsync("navigateTo", page)
End Function

Private Sub RotateCounterclockwise()
    ' Counterclockwise switch orientation
    rotationClass = "rotate-270"
End Sub

Private Async Function PrintPdf() As Task
    Await JSRuntime.InvokeVoidAsync("printDocument", documentId)
End Function

Private Async Function DownloadPdf() As Task
    Dim fileName As String = "document.pdf"
    Await JSRuntime.InvokeVoidAsync("downloadFile", pdfData, fileName)
End Function

Ce code ajoute la navigation entre les pages PDF , la fonctionnalité de rotation (y compris la rotation dans le sens antihoraire) et la possibilité d' imprimer les PDF . La fonction de téléchargement permet aux utilisateurs d' enregistrer les fichiers PDF localement. Ces fonctionnalités transforment votre visionneuse PDF de base en une visionneuse efficace dotée d'une barre d'outils intégrée offrant des fonctionnalités essentielles aux utilisateurs travaillant avec des documents PDF. Pensez à ajouter des numéros de page et des signets pour faciliter la navigation.

private async Task<string> RenderSpecificPage(int pageNumber)
{
    var pdfDocument = PdfDocument.FromFile("document.pdf");
    // Extract single page for faster rendering
    var singlePagePdf = pdfDocument.CopyPage(pageNumber - 1);

    // Convert to image for preview
    var imageData = singlePagePdf.RasterizeToImageFiles("preview_*.png", 150);

    return Convert.ToBase64String(imageData[0]);
}

private async Task<string> RenderSpecificPage(int pageNumber)
{
    var pdfDocument = PdfDocument.FromFile("document.pdf");
    // Extract single page for faster rendering
    var singlePagePdf = pdfDocument.CopyPage(pageNumber - 1);

    // Convert to image for preview
    var imageData = singlePagePdf.RasterizeToImageFiles("preview_*.png", 150);

    return Convert.ToBase64String(imageData[0]);
}

Private Async Function RenderSpecificPage(pageNumber As Integer) As Task(Of String)
    Dim pdfDocument = PdfDocument.FromFile("document.pdf")
    ' Extract single page for faster rendering
    Dim singlePagePdf = pdfDocument.CopyPage(pageNumber - 1)

    ' Convert to image for preview
    Dim imageData = singlePagePdf.RasterizeToImageFiles("preview_*.png", 150)

    Return Convert.ToBase64String(imageData(0))
End Function

Comment gérer le remplissage et les annotations des formulaires PDF ?

Pour les documents PDF contenant des champs de formulaire et des annotations , IronPDF offre une prise en charge fiable :

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

Option Strict On



Private Async Function ProcessFormFields() As Task
    Dim pdfDocument = PdfDocument.FromFile("form.pdf")
    For Each field In pdfDocument.Form.Fields
        If field.Type = PdfFormFieldType.Text Then
            field.Value = "User Input"
        End If
    Next
    ' Enable form filling in viewer
    Dim modifiedPdf = pdfDocument.BinaryData
    Await DisplayPdfContent(pdfDocument)
End Function

Cela active les fonctionnalités de remplissage de formulaires au sein de votre composant de visualisation PDF Blazor, permettant aux utilisateurs d'interagir directement avec les champs du 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. La prise en charge inclut les signatures numériques et les annotations textuelles .

private async Task SaveFormData()
{
    var pdfWithFormData = PdfDocument.FromFile("filled-form.pdf");

    // Extract form data
    var formData = new Dictionary<string, string>();
    foreach (var field in pdfWithFormData.Form.Fields)
    {
        formData[field.Name] = field.Value;
    }

    // Save to database or JSON
    var json = System.Text.Json.JsonSerializer.Serialize(formData);
    await File.WriteAllTextAsync("form-data.json", json);

    // Flatten form to prevent further editing
    pdfWithFormData.Form.Flatten();
    pdfWithFormData.SaveAs("form-submission.pdf");
}

private async Task SaveFormData()
{
    var pdfWithFormData = PdfDocument.FromFile("filled-form.pdf");

    // Extract form data
    var formData = new Dictionary<string, string>();
    foreach (var field in pdfWithFormData.Form.Fields)
    {
        formData[field.Name] = field.Value;
    }

    // Save to database or JSON
    var json = System.Text.Json.JsonSerializer.Serialize(formData);
    await File.WriteAllTextAsync("form-data.json", json);

    // Flatten form to prevent further editing
    pdfWithFormData.Form.Flatten();
    pdfWithFormData.SaveAs("form-submission.pdf");
}

Private Async Function SaveFormData() As Task
    Dim pdfWithFormData = PdfDocument.FromFile("filled-form.pdf")

    ' Extract form data
    Dim formData As New Dictionary(Of String, String)()
    For Each field In pdfWithFormData.Form.Fields
        formData(field.Name) = field.Value
    Next

    ' Save to database or JSON
    Dim json = System.Text.Json.JsonSerializer.Serialize(formData)
    Await File.WriteAllTextAsync("form-data.json", json)

    ' Flatten form to prevent further editing
    pdfWithFormData.Form.Flatten()
    pdfWithFormData.SaveAs("form-submission.pdf")
End Function

Comment améliorer les performances des fichiers PDF volumineux ?

Pour garantir des performances élevées lors de l'affichage des fichiers PDF, notamment 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);
    }
}

Private Async Function LoadLargePdf() As Task
    Const chunkSize As Integer = 1024 * 1024 ' 1MB chunks
    Dim pdfPath As String = "largefile.pdf"
    Using fileStream = File.OpenRead(pdfPath)
        Dim buffer(chunkSize - 1) As Byte
        Dim chunks As New List(Of Byte())()
        Dim bytesRead As Integer
        Do
            bytesRead = Await fileStream.ReadAsync(buffer, 0, buffer.Length)
            If bytesRead > 0 Then
                Dim chunk(bytesRead - 1) As Byte
                Array.Copy(buffer, chunk, bytesRead)
                chunks.Add(chunk)
            End If
        Loop While bytesRead > 0
        ' Process chunks for display
        Await ProcessPdfChunks(chunks)
    End Using
End Function

Cette approche charge les fichiers PDF volumineux par blocs, évitant ainsi les problèmes de mémoire et garantissant des performances fluides même avec des documents PDF importants. Il est particulièrement utile pour manipuler des fichiers PDF sur des appareils mobiles ou des systèmes aux ressources limitées. Envisagez la mise en œuvre de stratégies de prévention des fuites de mémoire .

Les stratégies d'optimisation supplémentaires comprennent :

• Linéarisation pour un affichage web rapide
• Compression pour réduire la taille des fichiers
• Traitement parallèle de plusieurs fichiers PDF
• Mécanismes de mise en cache pour les documents fréquemment consultés
• Gestion des flux de mémoire pour une utilisation efficace des ressources

Pour les environnements Docker , améliorez la configuration des conteneurs. Dans AWS Lambda , gérez soigneusement l'allocation de mémoire .

private async Task<bool> CheckMemoryBeforeLoad(long fileSize)
{
    var memoryInfo = GC.GetTotalMemory(false);
    var availableMemory = GC.GetTotalMemory(true);

    // Conservative estimate: file size * 3 for processing overhead
    var requiredMemory = fileSize * 3;

    if (requiredMemory > availableMemory * 0.8) // 80% threshold
    {
        // Trigger garbage collection
        GC.Collect();
        GC.WaitForPendingFinalizers();
        GC.Collect();

        // Re-check after cleanup
        availableMemory = GC.GetTotalMemory(true);
        return requiredMemory <= availableMemory * 0.8;
    }

    return true;
}

private async Task<bool> CheckMemoryBeforeLoad(long fileSize)
{
    var memoryInfo = GC.GetTotalMemory(false);
    var availableMemory = GC.GetTotalMemory(true);

    // Conservative estimate: file size * 3 for processing overhead
    var requiredMemory = fileSize * 3;

    if (requiredMemory > availableMemory * 0.8) // 80% threshold
    {
        // Trigger garbage collection
        GC.Collect();
        GC.WaitForPendingFinalizers();
        GC.Collect();

        // Re-check after cleanup
        availableMemory = GC.GetTotalMemory(true);
        return requiredMemory <= availableMemory * 0.8;
    }

    return true;
}

Private Async Function CheckMemoryBeforeLoad(fileSize As Long) As Task(Of Boolean)
    Dim memoryInfo = GC.GetTotalMemory(False)
    Dim availableMemory = GC.GetTotalMemory(True)

    ' Conservative estimate: file size * 3 for processing overhead
    Dim requiredMemory = fileSize * 3

    If requiredMemory > availableMemory * 0.8 Then ' 80% threshold
        ' Trigger garbage collection
        GC.Collect()
        GC.WaitForPendingFinalizers()
        GC.Collect()

        ' Re-check after cleanup
        availableMemory = GC.GetTotalMemory(True)
        Return requiredMemory <= availableMemory * 0.8
    End If

    Return True
End Function

Comment sécuriser les fichiers PDF protégés par mot de passe ?

Lors de la manipulation de 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);
    }
}

Private Async Function LoadSecurePdf(password As String) As Task
    Dim pdfDocument = PdfDocument.FromFile("secure.pdf", password)
    If pdfDocument IsNot Nothing Then
        Dim headers = New Dictionary(Of String, String) From {
            {"X-Frame-Options", "SAMEORIGIN"},
            {"Content-Security-Policy", "default-src 'self'"}
        }
        Await DisplayPdfContent(pdfDocument)
    End If
End Function

Ce code illustre le chargement de documents PDF protégés par mot de passe tout en maintenant la sécurité grâce à une configuration appropriée des en-têtes. Envisagez l'utilisation de signatures numériques pour améliorer l'authentification.

private void ConfigureSecurityHeaders(HttpResponse response)
{
    response.Headers.Add("X-Content-Type-Options", "nosniff");
    response.Headers.Add("X-Frame-Options", "DENY");
    response.Headers.Add("Content-Security-Policy", 
        "default-src 'self'; script-src 'self' 'unsafe-inline'; object-src 'none'");
    response.Headers.Add("Referrer-Policy", "no-referrer");
    response.Headers.Add("Permissions-Policy", "camera=(), microphone=(), geolocation=()");
}

private void ConfigureSecurityHeaders(HttpResponse response)
{
    response.Headers.Add("X-Content-Type-Options", "nosniff");
    response.Headers.Add("X-Frame-Options", "DENY");
    response.Headers.Add("Content-Security-Policy", 
        "default-src 'self'; script-src 'self' 'unsafe-inline'; object-src 'none'");
    response.Headers.Add("Referrer-Policy", "no-referrer");
    response.Headers.Add("Permissions-Policy", "camera=(), microphone=(), geolocation=()");
}

Private Sub ConfigureSecurityHeaders(response As HttpResponse)
    response.Headers.Add("X-Content-Type-Options", "nosniff")
    response.Headers.Add("X-Frame-Options", "DENY")
    response.Headers.Add("Content-Security-Policy", 
                         "default-src 'self'; script-src 'self' 'unsafe-inline'; object-src 'none'")
    response.Headers.Add("Referrer-Policy", "no-referrer")
    response.Headers.Add("Permissions-Policy", "camera=(), microphone=(), geolocation=()")
End Sub

Quels sont les principaux points à retenir concernant l'affichage PDF Blazor ?

L'intégration d'une visionneuse PDF Blazor avec IronPDF offre aux développeurs une solution complète pour l'affichage de fichiers PDF dans les applications web. De l'affichage de base aux fonctionnalités avancées telles que le remplissage de formulaires et les annotations , le composant de visualisation PDF d'IronPDF offre les fonctionnalités nécessaires aux applications professionnelles.

Les exemples présentés démontrent comment créer une visionneuse PDF Blazor fiable, capable de gérer diverses sources PDF, de fournir des fonctionnalités interactives et de maintenir des performances élevées . Que vous développiez une simple visionneuse de documents ou un système complexe de gestion de documents , l'intégration d'IronPDF avec les applications Blazor Server facilite la mise en œuvre de fonctionnalités professionnelles de visualisation de PDF. Le moteur de rendu de Chrome garantit des résultats cohérents sur toutes les plateformes.

Les principaux avantages de l'utilisation d'IronPDF pour l'affichage de PDF Blazor sont les suivants :

• Compatibilité multiplateforme avec un rendu cohérent
• Fonctionnalités de sécurité avancées pour les documents sensibles
• Optimisation des performances pour les fichiers volumineux
• Fonctionnalités complètes de traitement des formulaires
• Intégration fluide avec les applications .NET existantes

Pour certains scénarios de déploiement, IronPDF prend en charge Azure , AWS , Docker et les environnements Windows traditionnels. La bibliothèque s'intègre également aux applications F# et VB.NET .

Prêt à implémenter votre propre visionneuse PDF ? Démarrez votre essai gratuit d'IronPDF dès aujourd'hui et accédez à la documentation complète , aux applications de démonstration et à l'assistance aux développeurs pour créer des expériences de visualisation PDF efficaces dans vos applications Blazor. Le guide de démarrage rapide vous permet de commencer immédiatement, tandis que les exemples de code illustrent des mises en œuvre pratiques.