Comment ouvrir un PDF dans un nouvel onglet dans Blazor

Prérequis et Configuration

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";

IRON VB CONVERTER ERROR developers@ironsoftware.com

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 pour ouvrir un PDF dans un nouvel onglet nécessite une interopérabilité JavaScript (interop JS) pour relier la génération de PDF côté serveur à la gestion de la fenêtre 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 en utilisant la fonctionnalité window.open() de JavaScript. Cette approche signifie 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 PDFs dans de nouveaux onglets de 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>

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

Ce blob est ensuite utilisé pour créer une URL temporaire, qui est enfin passée à 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
            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;
        }
    }
}

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 de code C# @code 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 du PDF résultant en une chaîne Base64 et utilise @inject IJSRuntime JS pour appeler la fonction JavaScript, ouvrant 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");
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

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 solution à 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

IRON VB CONVERTER ERROR developers@ironsoftware.com

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>

Cette approche fonctionne bien pour les PDFs pré-générés mais elle manque de capacités de génération dynamique de la méthode d'interop JS.

Bonnes pratiques

1. Gestion des Erreurs : Enveloppez toujours la génération de PDF dans des blocs try-catch et fournissez 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 de PDFs.

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 du DOM : Rappelez-vous que C# sur le serveur ne peut pas manipuler directement le DOM du client ; c'est pourquoi l'interop JS est essentielle. 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é : Validez et assainissez les entrées utilisateur avant de générer les PDFs.

Conclusion

Combiner les puissantes capacités de génération de PDF de IronPDF avec l'interopérabilité JavaScript de Blazor offre une solution robuste pour ouvrir des PDFs 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 ? Commencez votre essai gratuit d'IronPDF aujourd'hui. L'essai comprend toutes les fonctionnalités sans filigranes et un support complet pour assurer votre réussite.