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

License.LicenseKey = "YOUR-LICENSE-KEY"

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, qualitativ hochwertige PDF-Dokumente auf dem Server zu generieren, die dann mithilfe der window.open()-Funktionalität von JavaScript 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>

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.

Die JavaScript Funktion window.openPdfInNewTab ist entscheidend für die Lösung des Problems, einen neuen Tab vom Server aus zu öffnen. Es empfängt die PDF-Daten als Base64-Zeichenkette vom Blazor Server und der clientseitige Code wandelt sie 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;
        }
    }
}

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

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 @inject IJSRuntime JS verwendet, um die JavaScript Funktion aufzurufen, die das Dokument für den Benutzer öffnet.

Arbeiten mit dynamischen HTML-Inhalten

Um PDFs aus dynamischen Inhalten anstelle von URLs zu generieren, ändern Sie Ihren Ansatz und verwenden Sie 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

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

Umgang mit allgemeinen Problemen

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

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

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

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>

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

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: Benutzereingaben vor der PDF-Generierung validieren und bereinigen

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.