Blazor PDF mit IronPDF in einem neuen Tab öffnen: Eine Anleitung für Entwickler

Voraussetzungen und Einrichtung

Beginnen Sie mit der Erstellung eines neuen Blazor-Serverprojekts in Visual Studio 2022. Installieren Sie IronPDF über die NuGet-Paket-Manager-Konsole:

Install-Package IronPdf

Konfigurieren Sie Ihre IronPDF-Lizenz in Program.cs, um die volle Funktionalität zu aktivieren:

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

Verständnis der Herausforderung

Blazor-Serveranwendungen können die Browser-Tabs nicht direkt über C#-Code auf dem Server manipulieren. Die Aufgabe von Blazor open PDF in new tab erfordert JavaScript InterOp (JS interop), um die serverseitige PDF-Erzeugung mit der clientseitigen Fensterverwaltung zu verbinden.

IronPDF ermöglicht es Entwicklern, hochwertige PDF-Dokumente auf dem Server zu erzeugen, die dann mit der JavaScript-Funktionalität window.open() angezeigt werden können. Bei diesem Ansatz geht es darum, ein gängiges Client-Server-Problem in einer Netzanwendung zu lösen.

Implementierung von JavaScript-Funktionen in Ihrer Blazor-Web-App

Fügen Sie diesen JavaScript-Code zu Ihrer Datei _Host.cshtml hinzu, um die Anzeige von PDF-Dateien in neuen Browser-Tabs zu steuern. Dies ist das Modul, das für die clientseitige Fensterverwaltung verantwortlich ist:

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

Die window.openPdfInNewTab JavaScript-Funktion ist entscheidend für die Lösung der Herausforderung, ein neues Tab vom Server aus zu öffnen. Sie akzeptiert die PDF-Daten als Base64-String vom Blazor-Server und wandelt sie durch clientseitigen Code in ein binäres Blob-Objekt um.

Dieser Blob wird dann verwendet, um eine temporäre URL zu erstellen, die schließlich an window.open(blobUrl, '_blank') übergeben wird, um den Browser zu zwingen, die PDF-Datei in einem neuen Tab zu öffnen.

Erstellung der Blazor-Komponente

Erstellen Sie eine neue Razor-Komponente, die PDFs erzeugt und in neuen Tabs öffnet. Dies dient als Hauptvorlage für die Lösung:

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

Dieser Codeblock definiert die hauptsächliche interaktive Seite. Das Razor-Markup erstellt eine einfache Benutzeroberfläche mit einem URL-Eingabefeld und einem Button. Der C# @code-Block übernimmt die Logik: Wenn die Schaltfläche angeklickt wird, verwendet er eine ChromePdfRenderer-Instanz, um die PDF-Datei aus der vom Benutzer angegebenen URL zu generieren.

Anschließend wird das resultierende PDF-Byte-Array in eine Base64-Zeichenkette umgewandelt und mit @inject IJSRuntime JS die JavaScript-Funktion aufgerufen, um das Dokument für den Benutzer zu öffnen.

Arbeiten mit dynamischen HTML-Inhalten

Um PDFs aus dynamischen Inhalten anstelle von URLs zu generieren, ändern Sie Ihren Ansatz, um RenderHtmlAsPdf zu verwenden:

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

Die GenerateFromHtml-Methode zeigt, wie IronPDF ein PDF aus dynamisch generiertem HTML-Markup anstelle einer vorhandenen URL erzeugen kann. Es erstellt einen vollständigen HTML-String mit einer Überschrift, Inhalt und dynamischen Daten. Die Antwort auf die Erzeugung dynamischer Inhalte ist die RenderHtmlAsPdf-Methode.

Umgang mit allgemeinen Problemen

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

Navigationsalternativen

Neben JavaScript-Interop können Sie PDFs über statische Dateimiddleware bereitstellen und standardmäßige HTML-Anker-Tags für eine alternative Navigationsoption verwenden:

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

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

IRON VB CONVERTER ERROR developers@ironsoftware.com

Dieser Ansatz eignet sich gut für vorgenerierte PDFs, bietet aber nicht die dynamischen Generierungsmöglichkeiten der JS InterOp-Methode.

Bewährte Verfahren

1. Fehlerbehandlung: Die PDF-Generierung sollte immer in try-catch-Blöcke verpackt werden und den Benutzern aussagekräftige Fehlermeldungen liefern, wenn ein Problem auftritt.
2. Leistung: Verwenden Sie async/await-Muster, um ein Blockieren der Benutzeroberfläche während der PDF-Generierung zu verhindern.
3. Benutzererfahrung: Zeigen Sie Ladeindikatoren während der Generierung an und gehen Sie Szenarien mit Pop-up-Blockern gelassen an.
4. DOM Manipulation: Denken Sie daran, dass C# auf dem Server das DOM des Clients nicht direkt manipulieren kann; aus diesem Grund ist JS InterOp unerlässlich. Sie müssen die Höhe oder Breite des neuen Fensters nicht manuell einstellen, da der Browser den PDF-Viewer handhabt.
5. Sicherheit: Validierung und Bereinigung von Benutzereingaben vor der Erstellung von PDFs

Abschluss

Die Kombination der leistungsstarken PDF-Erzeugungsfunktionen von IronPDF mit dem JavaScript InterOp von Blazor bietet eine robuste Lösung zum Öffnen von PDFs in neuen Browser-Tabs. Dieser Ansatz ermöglicht es Entwicklern, dynamische, professionelle PDF-Dokumente zu erstellen, die nahtlos in moderne Blazor-Anwendungen integriert werden, die auf der von Microsoft entwickelten .NET-Technologie basieren.

Bereit, um PDF-Funktionalität in Ihrem Blazor-Projekt zu implementieren? Starten Sie noch heute Ihre kostenlose IronPDF-Testversion. Die Testversion umfasst alle Funktionen ohne Wasserzeichen und umfassenden Support, um Ihren Erfolg sicherzustellen.