Quels sont les prérequis pour mon projet Blazor ?

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"

Vous devrez utiliser une clé de licence pour débloquer toutes les fonctionnalités. IronPDF fonctionne parfaitement avec les applications Blazor Server , offrant des capacités de génération de PDF robustes pour les applications web modernes. Si vous débutez avec IronPDF, consultez le guide de démarrage rapide pour vous familiariser avec les bases.

Pourquoi Blazor ne peut-il pas ouvrir directement les fichiers PDF dans de nouveaux onglets ?

Les applications Blazor Server ne peuvent pas manipuler directement les onglets du navigateur depuis le code C# sur le serveur. L'ouverture d'un PDF dans un nouvel onglet depuis Blazor nécessite l'interopérabilité 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 résout un problème courant de frontière client-serveur dans les applications .NET. Le moteur de rendu Chrome de la bibliothèque garantit une conversion HTML vers PDF au pixel près , préservant ainsi l'intégrité visuelle de vos documents.

Lorsqu'on travaille avec Blazor et IronPDF , il est important de comprendre que l'exécution de JavaScript se produit côté client tandis que la génération du PDF a lieu côté serveur. Cette séparation nécessite l'utilisation de l'interopérabilité JavaScript pour les tâches de gestion des fenêtres.

Comment implémenter des fonctions JavaScript dans mon application web Blazor ?

Ajoutez ce code JavaScript à votre fichier _Host.cshtml pour gérer l'affichage des PDFs dans de nouveaux onglets de navigateur. Ce module gère les opérations de fenêtre 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 essentielle pour ouvrir un nouvel onglet depuis le serveur. Il accepte les données PDF sous forme de chaîne Base64 provenant du serveur Blazor, et le code côté client les convertit en un objet Blob binaire. Cette approche est similaire à la conversion d'un PDF en Base64 mais en sens inverse, permettant ainsi au navigateur d'afficher le contenu du PDF.

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. La technique d'URL blob est couramment utilisée pour charger des fichiers PDF depuis la mémoire sans nécessiter de stockage de fichiers côté serveur.

Pour les applications nécessitant une sécurité renforcée, envisagez de mettre en œuvre des autorisations et des mots de passe pour les fichiers PDF avant de transmettre le document au client. Vous pouvez également envisager l'utilisation de signatures numériques pour garantir l'authenticité des documents.

Comment créer le 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>
    <input @bind="targetUrl" class="form-control" />
</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 = "___PROTECTED_URL_69___";
    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. Les options de rendu vous permettent de personnaliser les marges , d'activer le rendu JavaScript et de définir des délais de rendu pour le contenu dynamique.

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. Ce modèle est particulièrement utile lors de la conversion d'URL en PDF dans les applications web. Pour des scénarios plus complexes, vous pourriez envisager d'implémenter une génération PDF asynchrone pour de meilleures performances.

Envisagez la mise en place d'une journalisation personnalisée pour suivre les activités de génération de PDF et résoudre les problèmes. Vous pouvez également ajouter des filigranes ou des en-têtes et pieds de page pour améliorer vos PDF.

Comment 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; }}
                table {{ border-collapse: collapse; width: 100%; }}
                th, td {{ border: 1px solid #ddd; padding: 8px; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </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; }}
                table {{ border-collapse: collapse; width: 100%; }}
                th, td {{ border: 1px solid #ddd; padding: 8px; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </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; }}
                table {{ border-collapse: collapse; width: 100%; }}
                th, td {{ border: 1px solid #ddd; padding: 8px; }}
            </style>
        </head>
        <body>
            <h1>{documentTitle}</h1>
            <p>{documentContent}</p>
            <table>
                <tr>
                    <th>Item</th>
                    <th>Value</th>
                </tr>
                <tr>
                    <td>Generated</td>
                    <td>{DateTime.Now}</td>
                </tr>
            </table>
        </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 méthode RenderHtmlAsPdf gère la conversion de manière transparente. Cette approche est idéale pour créer des rapports PDF avec des données dynamiques provenant de bases de données ou d'API.

Vous pouvez enrichir votre contenu HTML avec des polices personnalisées , du CSS réactif et même des images intégrées grâce aux DataURI . Pour les mises en page complexes, envisagez d'utiliser Bootstrap et Flexbox afin de garantir un rendu cohérent.

Lors de la gestion de documents en langues internationales , IronPDF offre une excellente prise en charge d'Unicode , garantissant un rendu correct des caractères dans différentes langues et systèmes d'écriture. Vous pouvez également contrôler les sauts de page et définir des formats de papier personnalisés pour répondre aux exigences spécifiques de vos documents.

Quels sont les problèmes courants que je dois gérer ?

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
private readonly IMemoryCache _cache;

public async Task<byte[]> GetCachedPdf(string cacheKey)
{
    if (!_cache.TryGetValue(cacheKey, out byte[] pdfBytes))
    {
        // Generate PDF
        var renderer = new ChromePdfRenderer();
        var pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___");
        pdfBytes = pdf.BinaryData;

        // Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10));
    }
    return pdfBytes;
}

services.AddMemoryCache();
// Cache generated PDFs to avoid regeneration
private readonly IMemoryCache _cache;

public async Task<byte[]> GetCachedPdf(string cacheKey)
{
    if (!_cache.TryGetValue(cacheKey, out byte[] pdfBytes))
    {
        // Generate PDF
        var renderer = new ChromePdfRenderer();
        var pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___");
        pdfBytes = pdf.BinaryData;

        // Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10));
    }
    return pdfBytes;
}

Imports System
Imports System.Threading.Tasks
Imports Microsoft.Extensions.Caching.Memory

' Cache generated PDFs to avoid regeneration
Private ReadOnly _cache As IMemoryCache

Public Async Function GetCachedPdf(cacheKey As String) As Task(Of Byte())
    Dim pdfBytes As Byte() = Nothing
    If Not _cache.TryGetValue(cacheKey, pdfBytes) Then
        ' Generate PDF
        Dim renderer As New ChromePdfRenderer()
        Dim pdf = renderer.RenderUrlAsPdf("___PROTECTED_URL_70___")
        pdfBytes = pdf.BinaryData

        ' Cache for 10 minutes
        _cache.Set(cacheKey, pdfBytes, TimeSpan.FromMinutes(10))
    End If
    Return pdfBytes
End Function

Quelles alternatives de navigation puis-je utiliser ?

Outre l'interopérabilité JavaScript, vous pouvez diffuser des fichiers PDF via un middleware de fichiers statiques et utiliser des balises d'ancrage HTML standard pour une navigation alternative :

<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. Pour des scénarios plus avancés, envisagez la mise en œuvre d'un composant dédié à la visualisation des PDF ou l'utilisation de MemoryStream pour diffuser les PDF sans les enregistrer sur le disque.

Vous pourriez également envisager d'enregistrer les fichiers PDF sur un stockage cloud comme Azure Blob Storage pour une meilleure évolutivité. Pour les applications nécessitant un accès hors ligne, envisagez d'implémenter une fonctionnalité de téléchargement de PDF en plus de la fonctionnalité d'onglet.

Quelles sont les bonnes pratiques à suivre ?

1. Gestion des erreurs : Encapsuler la génération de PDF dans des blocs try-catch avec des messages d'erreur significatifs. Suivez les problèmes à l'aide d' une journalisation des erreurs personnalisée .

2. Performances : Utilisez async/await pour éviter le blocage de l'interface utilisateur. Mettre en place des délais de rendu pour les pages contenant beaucoup de JavaScript. Préchauffez le moteur pour des rendus initiaux plus rapides .

3. Expérience utilisateur : Afficher les indicateurs de chargement et gérer les bloqueurs de pop-up avec élégance. Suivre l'avancement des fichiers PDF multipages . Fournissez un retour d'information clair sur les problèmes de réseau .

4. Manipulation du DOM : N'oubliez pas que le C# côté serveur ne peut pas manipuler directement le DOM du client. Utilisez les écouteurs de messages JavaScript pour les interactions complexes.

5. Sécurité : Valider toutes les entrées de l'utilisateur avant la génération du PDF. Appliquez la désinfection des fichiers PDF , les signatures numériques et le chiffrement selon les besoins. Utilisez HTTPS pour une transmission sécurisée .

6. Gestion des ressources : Éliminer correctement les documents PDF et éviter les fuites de mémoire . Surveillez la taille des paquets pour des déploiements conteneurisés optimisés.

Conclusion

L'association des puissantes capacités de génération de PDF d'IronPDF avec l'interopérabilité JavaScript de Blazor offre une solution robuste pour ouvrir les 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. Que vous convertissiez du HTML en PDF , créiez des formulaires ou organisiez des documents complexes , IronPDF fournit les outils nécessaires à une gestion des PDF de niveau entreprise.

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. Pour les déploiements en production, découvrez nos options de licence et nos guides de déploiement pour différentes plateformes, notamment Windows , Linux et Azure .