Blazor Ouvrir le PDF dans un nouvel onglet avec IronPDF : Un tutoriel pour les développeurs

Prérequis et Installation

Commencez par créer un nouveau projet Blazor Server dans Visual Studio 2022. Installez IronPDF via la console du gestionnaire de packages NuGet :

Install-Package IronPdf

Configurez votre licence IronPDF dans Program.cs pour activer toutes les fonctionnalités :

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

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

License.LicenseKey = "YOUR-LICENSE-KEY"

Comprendre le Défi

Les applications Blazor Server ne peuvent pas manipuler directement les onglets du navigateur depuis le code C# sur le serveur. La tâche de Blazor ouvrir le PDF dans un nouvel onglet nécessite une interopération JavaScript (JS interop) pour faire le lien entre la génération de PDF côté serveur et la gestion des fenêtres côté client.

IronPDF permet aux développeurs de générer des documents PDF de haute qualité sur le serveur, qui peuvent ensuite être affichés à l'aide de la fonctionnalité window.open() de JavaScript. Cette approche consiste à résoudre un problème client-serveur courant dans une application .NET.

Mise en œuvre des Fonctions JavaScript dans Votre Application Web Blazor

Ajoutez ce code JavaScript à votre fichier _Host.cshtml pour gérer l'affichage des PDF dans les nouveaux onglets du navigateur. Voici le module responsable de la gestion des fenêtres côté client :

<script>
    window.openPdfInNewTab = function (pdfData, fileName) {
        // Convert base64 to blob
        const byteCharacters = atob(pdfData);
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        // The type is 'application/pdf', not 'image/png' or 'image/jpg'
        const blob = new Blob([byteArray], { type: 'application/pdf' });
        // Create URL and open in new tab
        const blobUrl = URL.createObjectURL(blob);
        const newWindow = window.open(blobUrl, '_blank');
        if (newWindow) {
            newWindow.document.title = fileName || 'PDF Document';
        }
        // Clean up
        setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
        return newWindow !== null;
    };
</script>

<script>
    window.openPdfInNewTab = function (pdfData, fileName) {
        // Convert base64 to blob
        const byteCharacters = atob(pdfData);
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        // The type is 'application/pdf', not 'image/png' or 'image/jpg'
        const blob = new Blob([byteArray], { type: 'application/pdf' });
        // Create URL and open in new tab
        const blobUrl = URL.createObjectURL(blob);
        const newWindow = window.open(blobUrl, '_blank');
        if (newWindow) {
            newWindow.document.title = fileName || 'PDF Document';
        }
        // Clean up
        setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
        return newWindow !== null;
    };
</script>

The provided code is JavaScript, not C#. However, I can help you convert it into VB.NET code that would perform a similar function if executed in a VB.NET environment with a web browser control or similar setup. Here's how you might implement similar functionality in VB.NET:



Note: This VB.NET code assumes you are working in a desktop application environment where you can use the `Process.Start` method to open a PDF file with the default PDF viewer. If you are working in a web environment, you would need to adapt this code to fit the web context, possibly using a web server to serve the PDF file to the client.

La fonction JavaScript window.openPdfInNewTab est cruciale pour résoudre le défi d'ouvrir un nouvel onglet depuis le serveur. Il accepte les données PDF en tant que chaîne Base64 à partir du serveur Blazor et le code côté client les convertit en un objet Blob binaire.

Ce blob est ensuite utilisé pour créer une URL temporaire, qui est finalement transmise à window.open(blobUrl, '_blank') pour forcer le navigateur à ouvrir le PDF dans un nouvel onglet.

Création du Composant Blazor

Créez un nouveau composant Razor qui génère des PDFs et les ouvre dans de nouveaux onglets. Ceci sert de modèle principal pour la solution :

@page "/pdf-viewer"
@using IronPDF @inject IJSRuntime JS
<h3>Open PDF in New Tab</h3>
<div class="mb-3">
    <label>Enter URL:</label>
</div>
<button class="btn btn-primary" @onclick="GenerateAndOpenPdf"
        disabled="@isProcessing">
    @if (isProcessing)
    {
        <span>Generating PDF...</span>
    }
    else
    {
        <span>Generate and Open PDF</span>
    }
</button>
@if (!string.IsNullOrEmpty(errorMessage))
{
    <div class="alert alert-danger mt-3">@errorMessage</div>
}
@code {
    private string targetUrl = "https://ironpdf.com";
    private bool isProcessing = false;
    private string errorMessage = "";
    private async Task GenerateAndOpenPdf()
    {
        isProcessing = true;
        errorMessage = "";
        try
        {
            // Configure Chrome PDF renderer. Note the rendering details
            var renderer = new ChromePdfRenderer
            {
                RenderingOptions = new ChromePdfRenderOptions
                {
                    MarginTop = 10,
                    MarginBottom = 10,
                    MarginLeft = 10,
                    MarginRight = 10,
                    EnableJavaScript = true,
                    RenderDelay = 500
                }
            };
            // Generate PDF from URL
            var pdfDocument = await Task.Run(() =>
                renderer.RenderUrlAsPdf(targetUrl));
            // Convert to base64
            byte[] pdfBytes = pdfDocument.BinaryData;
            string base64Pdf = Convert.ToBase64String(pdfBytes);
            // Open in new tab via JS interop. We run this call to open the PDF
            bool success = await JS.InvokeAsync<bool>("openPdfInNewTab",
                base64Pdf, $"Document_{DateTime.Now:yyyyMMdd_HHmmss}.pdf");
            if (!success)
            {
                // Giving the user an understandable error is key
                errorMessage = "Pop-up blocked. Please allow pop-ups for this site.";
            }
        }
        catch (Exception ex)
        {
            errorMessage = $"Error: {ex.Message}";
        }
        finally
        {
            isProcessing = false;
        }
    }
}

@page "/pdf-viewer"
@using IronPDF @inject IJSRuntime JS
<h3>Open PDF in New Tab</h3>
<div class="mb-3">
    <label>Enter URL:</label>
</div>
<button class="btn btn-primary" @onclick="GenerateAndOpenPdf"
        disabled="@isProcessing">
    @if (isProcessing)
    {
        <span>Generating PDF...</span>
    }
    else
    {
        <span>Generate and Open PDF</span>
    }
</button>
@if (!string.IsNullOrEmpty(errorMessage))
{
    <div class="alert alert-danger mt-3">@errorMessage</div>
}
@code {
    private string targetUrl = "https://ironpdf.com";
    private bool isProcessing = false;
    private string errorMessage = "";
    private async Task GenerateAndOpenPdf()
    {
        isProcessing = true;
        errorMessage = "";
        try
        {
            // Configure Chrome PDF renderer. Note the rendering details
            var renderer = new ChromePdfRenderer
            {
                RenderingOptions = new ChromePdfRenderOptions
                {
                    MarginTop = 10,
                    MarginBottom = 10,
                    MarginLeft = 10,
                    MarginRight = 10,
                    EnableJavaScript = true,
                    RenderDelay = 500
                }
            };
            // Generate PDF from URL
            var pdfDocument = await Task.Run(() =>
                renderer.RenderUrlAsPdf(targetUrl));
            // Convert to base64
            byte[] pdfBytes = pdfDocument.BinaryData;
            string base64Pdf = Convert.ToBase64String(pdfBytes);
            // Open in new tab via JS interop. We run this call to open the PDF
            bool success = await JS.InvokeAsync<bool>("openPdfInNewTab",
                base64Pdf, $"Document_{DateTime.Now:yyyyMMdd_HHmmss}.pdf");
            if (!success)
            {
                // Giving the user an understandable error is key
                errorMessage = "Pop-up blocked. Please allow pop-ups for this site.";
            }
        }
        catch (Exception ex)
        {
            errorMessage = $"Error: {ex.Message}";
        }
        finally
        {
            isProcessing = false;
        }
    }
}

Imports IronPDF
Imports Microsoft.JSInterop

@page "/pdf-viewer"
@inject IJSRuntime JS

<h3>Open PDF in New Tab</h3>
<div class="mb-3">
    <label>Enter URL:</label>
</div>
<button class="btn btn-primary" @onclick="GenerateAndOpenPdf" disabled="@isProcessing">
    @If isProcessing Then
        <span>Generating PDF...</span>
    Else
        <span>Generate and Open PDF</span>
    End If
</button>
@If Not String.IsNullOrEmpty(errorMessage) Then
    <div class="alert alert-danger mt-3">@errorMessage</div>
End If

@Code
    Private targetUrl As String = "https://ironpdf.com"
    Private isProcessing As Boolean = False
    Private errorMessage As String = ""

    Private Async Function GenerateAndOpenPdf() As Task
        isProcessing = True
        errorMessage = ""
        Try
            ' Configure Chrome PDF renderer. Note the rendering details
            Dim renderer As New ChromePdfRenderer With {
                .RenderingOptions = New ChromePdfRenderOptions With {
                    .MarginTop = 10,
                    .MarginBottom = 10,
                    .MarginLeft = 10,
                    .MarginRight = 10,
                    .EnableJavaScript = True,
                    .RenderDelay = 500
                }
            }
            ' Generate PDF from URL
            Dim pdfDocument = Await Task.Run(Function() renderer.RenderUrlAsPdf(targetUrl))
            ' Convert to base64
            Dim pdfBytes As Byte() = pdfDocument.BinaryData
            Dim base64Pdf As String = Convert.ToBase64String(pdfBytes)
            ' Open in new tab via JS interop. We run this call to open the PDF
            Dim success As Boolean = Await JS.InvokeAsync(Of Boolean)("openPdfInNewTab", base64Pdf, $"Document_{DateTime.Now:yyyyMMdd_HHmmss}.pdf")
            If Not success Then
                ' Giving the user an understandable error is key
                errorMessage = "Pop-up blocked. Please allow pop-ups for this site."
            End If
        Catch ex As Exception
            errorMessage = $"Error: {ex.Message}"
        Finally
            isProcessing = False
        End Try
    End Function
End Code

Ce bloc de code définit la page interactive principale. Le balisage Razor crée une interface utilisateur simple avec un champ d'entrée d'URL et un bouton. Le bloc @code C# gère la logique : lorsque le bouton est cliqué, il utilise une instance ChromePdfRenderer pour générer le PDF à partir de l'URL fournie par l'utilisateur.

Il convertit ensuite le tableau d'octets PDF résultant en une chaîne Base64 et utilise @inject IJSRuntime JS pour appeler la fonction JavaScript, ouvrant ainsi le document pour l'utilisateur.

Travailler avec du Contenu HTML Dynamique

Pour générer des PDFs à partir de contenu dynamique au lieu d'URLs, modifiez votre approche pour utiliser RenderHtmlAsPdf :

private async Task GenerateFromHtml()
{
    // Define CSS styles inside the HTML string for structure and appearance.
    string htmlContent = $@"
        <!DOCTYPE html>
        <html>
        <head>
            <style>
                body {{ font-family: Arial; padding: 20px; }}
                h1 {{ color: #2c3e50; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <div>Generated: {DateTime.Now}</div>
        </body>
        </html>";
    var renderer = new ChromePdfRenderer();
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    byte[] pdfBytes = pdfDocument.BinaryData;
    await JS.InvokeVoidAsync("openPdfInNewTab",
        Convert.ToBase64String(pdfBytes), "dynamic.pdf");
}

private async Task GenerateFromHtml()
{
    // Define CSS styles inside the HTML string for structure and appearance.
    string htmlContent = $@"
        <!DOCTYPE html>
        <html>
        <head>
            <style>
                body {{ font-family: Arial; padding: 20px; }}
                h1 {{ color: #2c3e50; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <div>Generated: {DateTime.Now}</div>
        </body>
        </html>";
    var renderer = new ChromePdfRenderer();
    var pdfDocument = renderer.RenderHtmlAsPdf(htmlContent);
    byte[] pdfBytes = pdfDocument.BinaryData;
    await JS.InvokeVoidAsync("openPdfInNewTab",
        Convert.ToBase64String(pdfBytes), "dynamic.pdf");
}

Private Async Function GenerateFromHtml() As Task
    ' Define CSS styles inside the HTML string for structure and appearance.
    Dim htmlContent As String = $"
        <!DOCTYPE html>
        <html>
        <head>
            <style>
                body {{ font-family: Arial; padding: 20px; }}
                h1 {{ color: #2c3e50; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <div>Generated: {DateTime.Now}</div>
        </body>
        </html>"
    Dim renderer = New ChromePdfRenderer()
    Dim pdfDocument = renderer.RenderHtmlAsPdf(htmlContent)
    Dim pdfBytes As Byte() = pdfDocument.BinaryData
    Await JS.InvokeVoidAsync("openPdfInNewTab", Convert.ToBase64String(pdfBytes), "dynamic.pdf")
End Function

La méthode GenerateFromHtml démontre comment IronPDF peut générer un PDF à partir d'un balisage HTML généré dynamiquement au lieu d'une URL existante. Elle construit une chaîne HTML complète contenant un en-tête, du contenu et des données dynamiques. La réponse à la génération de contenu dynamique est la méthode RenderHtmlAsPdf.

Gestion des Problèmes Courants

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration

services.AddMemoryCache()
' Cache generated PDFs to avoid regeneration

Alternatives de Navigation

Outre l'interopérabilité JavaScript, vous pouvez servir des PDFs via un middleware de fichiers statiques et utiliser des balises d'ancre HTML standard comme option alternative de navigation :

<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>

<a href="/pdfs/document.pdf" target="_blank">Open PDF</a>

The provided input is HTML, not C# code. Please provide valid C# code for conversion to VB.NET.

Cette approche fonctionne bien pour les PDF pré-générés mais n'offre pas les capacités de génération dynamique de la méthode JS InterOp.

Bonnes pratiques

1. Gestion des erreurs: Toujours intégrer la génération de PDF dans des blocs try-catch et fournir des messages d'erreur significatifs aux utilisateurs lorsqu'un problème survient.
2. Performance: Utilisez les modèles async/await pour éviter le blocage de l'interface utilisateur pendant la génération du PDF.
3. Expérience Utilisateur : Affichez des indicateurs de chargement lors de la génération et gérez les scénarios de blocage de pop-ups avec élégance.
4. manipulation DOM : N'oubliez pas que le C# sur le serveur ne peut pas manipuler directement le DOM du client ; c'est pourquoi JS InterOp est essentiel. Vous n'avez pas besoin de régler manuellement la hauteur ou la largeur de la nouvelle fenêtre, car le navigateur gère le visualisateur PDF.
5. Sécurité : Valider et nettoyer les données saisies par l'utilisateur avant de générer les PDF

Conclusion

La combinaison des puissantes capacités de génération de PDF d'IronPDF avec l'interopérabilité JavaScript de Blazor fournit une solution robuste pour l'ouverture de PDF dans de nouveaux onglets de navigateur. Cette approche permet aux développeurs de créer des documents PDF dynamiques et professionnels qui s'intègrent parfaitement aux applications Blazor modernes construites sur la technologie .NET de Microsoft.

Prêt à mettre en œuvre la fonctionnalité PDF dans votre projet Blazor ? Démarrez votre essai gratuit d'IronPDF dès aujourd'hui. L'essai comprend toutes les fonctionnalités sans filigranes et un support complet pour assurer votre réussite.