IRONSOFTWAREHOME
IRONPDF NUTZEN

Wie man PDF-Dateien in Selenium WebDriver C# ohne die übliche Komplexität liest

Curtis Chau
Curtis Chau
Updated: 23. April 2026

Das Öffnen von PDF-Dokumenten in einem neuen Browser-Tab ist eine häufige Anforderung für Blazor-Webanwendungen. Dieses Tutorial zeigt, wie man mit IronPDF PDFs generiert und sie mit Hilfe von JavaScript-Interop in neuen Tabs anzeigt, um den Benutzern eine nahtlose Dokumentanzeige zu ermöglichen. Dieses Beispiel konzentriert sich auf eine Blazor-Server-Version.

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:

PM > Install-Package IronPdf

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

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, hochwertige PDF-Dokumente auf dem Server zu erstellen, 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>

Die JavaScript-Funktion window.openPdfInNewTab ist entscheidend für die Lösung des Problems, einen neuen Tab vom Server aus zu öffnen. Sie akzeptiert die PDF-Daten als Base64 Zeichenkette vom Blazor-Server, und der clientseitige Code konvertiert sie in ein binäres Blob-Objekt.

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

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

UI-Ausgabe

Blazor PDF in neuem Tab mit IronPDF öffnen: Ein Entwickler-Tutorial: Bild 1 - Beispielhafte einfache Benutzeroberfläche

Ausgabe mit im neuen Tab geöffnetem PDF

Blazor PDF in neuem Tab mit IronPDF öffnen: Ein Entwickler-Tutorial: Bild 2 - Erste PDF-Datei in neuem Tab geöffnet

Arbeiten mit dynamischen HTML-Inhalten

Um PDFs aus dynamischen Inhalten anstelle von URLs zu erzeugen, passen Sie Ihre Methode an, 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");
}
C#

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

Aktualisierte Blazor-Server-UI

Blazor PDF in neuem Tab mit IronPDF öffnen: Ein Entwickler-Tutorial: Bild 3 - Aktualisiertes Beispiel UI für Ihr Serverprojekt

PDF im neuen Browser-Tab geöffnet

Blazor PDF in neuem Tab mit IronPDF öffnen: Ein Entwickler-Tutorial: Bild 4 - Beispiel eines dynamisch erstellten PDFs, das dann in einem neuen Tab geöffnet wurde

Umgang mit allgemeinen Problemen

Kompatibilität zwischen Browsern

Verschiedene Browser handhaben Blob-URLs unterschiedlich. Testen Sie Ihre Implementierung in Chrome, Firefox, Edge und Safari, um ein konsistentes Verhalten sicherzustellen.

Große Dateien

Für große PDF-Dokumente ziehen Sie in Betracht, serverseitiges Caching zu implementieren, um die Leistung zu verbessern:

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

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>

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.

Curtis Chau
Technischer Autor

Curtis Chau hat einen Bachelor-Abschluss in Informatik von der Carleton University und ist spezialisiert auf Frontend-Entwicklung mit Expertise in Node.js, TypeScript, JavaScript und React. Leidenschaftlich widmet er sich der Erstellung intuitiver und ästhetisch ansprechender Benutzerschnittstellen und arbeitet gerne mit modernen Frameworks sowie der Erstellung gut strukturierter, optisch ansprechender Handbücher.

...
Weiterlesen

Verwandte Artikel

Key in blue circle

Holen Sie sich sofort Ihren kostenlosen 30-Tage-Testschlüssel.

Keine Einschränkungen. 100 % freigeschaltet. Keine Kreditkarte.

bullet_checkedIhr Testlizenzschlüssel wurde Ihnen per E-Mail gesendet.Keine Einschränkungen. 100 % freigeschaltet. Keine Kreditkarte.
  • Logo Aetna
  • Logo NASA
  • Logo GE
  • Logo Porsche
  • Logo USDA
  • Logo Qatar
Join Millions of Engineers who’ve tried IronPDF
Buchen Sie Ihre kostenlose Live-Demo
Booking Badge

Von Millionen von Ingenieur*innen weltweit vertraut

Kundenlogos von Iron Software
Erhalten Sie Ihre unverbindliche Beratung
Füllen Sie das Formular unten aus oder senden Sie eine E-Mail an sales@ironsoftware.com
Ihre Daten werden immer vertraulich behandelt.
Von Millionen von Ingenieur*innen weltweit vertraut
Kundenlogos von Iron Software
Erhalten Sie sofort Ihren kostenlosen 30-Tage-Testschlüssel.
Ihr Testlizenzschlüssel wurde Ihnen per E-Mail gesendet.