Nachrichtensymbol
Zum Fußzeileninhalt springen
  1. IronPDF
  2. IronPDF Blog
  3. IronPDF nutzen
  4. Blazor PDF-Viewer
IRONPDF NUTZEN

Wie man einen Blazor PDF-Viewer mit IronPDF aufbaut

Curtis Chau
Curtis Chau
Aktualisiert:

Ein Blazor PDF-Viewer rendert PDF-Dokumente inline, indem er sie in eine base64-Daten-URI umwandelt und das Ergebnis in einem <iframe>-Element lädt. IronPDFs ChromePdfRenderer wandelt HTML-Strings, Live-URLs oder dynamische Inhalte in einem einzigen asynchronen Aufruf in PDF-Bytes um, sodass Blazor Server- und Blazor WebAssembly-Anwendungen vollständige PDF-Erstellungs- und Anzeigeoptionen ohne externe Viewer-Plugins haben.

Geschäftsanwendungen müssen regelmäßig Rechnungen, Verträge und Berichte anzeigen, ohne die Benutzer auf ein separates Tab umzuleiten oder sich auf den PDF-Support des Browsers zu verlassen, der je nach Gerät variiert. Das Komponentemodell von Blazor macht es einfach, ein PDF auf dem Server zu generieren, zu kodieren und in jede Seitenkomponente zu streamen, vorausgesetzt, die Bibliothek behandelt die Umwandlung zuverlässig.

Dieser Leitfaden behandelt die Installation, URL- und HTML-basierte Darstellung, Anpassung mit Kopf- und Fußzeilen, Browser-Downloads mittels JavaScript-Interop, einen Vergleich der Ansätze von Blazor Server und Blazor WebAssembly sowie vier erweiterte Operationen: Zusammenführen, Anmerkungen, Passwortschutz und Anzeige hochgeladener Dateien. Razor-Komponenten und entsprechende C#-Beispiele auf oberster Ebene sind für jede Technik bereitgestellt.

Starten Sie eine kostenlose IronPDF-Testversion, um den Beispielen in diesem Leitfaden zu folgen.

Wie starte ich mit IronPDF in einem Blazor-Projekt?

Der Einstieg erfordert die Installation des NuGet-Pakets und das Hinzufügen eines Lizenzschlüssels zu Program.cs. Installieren Sie IronPDF über die Paketmanager-Konsole:

Install-Package IronPdf

Alternativ suchen Sie im Benutzeroberfläche des NuGet-Paketmanagers nach "IronPdf" und wählen Sie die neueste Version aus.

NuGet Mit NuGet installieren

PM >  Install-Package IronPdf

Schauen Sie sich IronPDF auf NuGet für eine schnelle Installation an. Mit über 10 Millionen Downloads transformiert es die PDF-Entwicklung mit C#. Sie können auch das DLL oder den Windows Installer herunterladen.

Nach der Installation fügen Sie Ihren Lizenzschlüssel zu Program.cs hinzu, bevor Sie PDF-Operationen ausführen:

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";
IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";
$vbLabelText   $csharpLabel

IronPDF ist kompatibel mit .NET 10, .NET 9, .NET 8, .NET 6 und .NET Framework 4.6.2 und später. Für Entwicklung und Tests funktioniert die Bibliothek ohne Lizenzschlüssel, stempelt jedoch ein Wasserzeichen auf die generierten PDFs. Eine kostenlose Testlizenz entfernt das Wasserzeichen während der Bewertung.

IronPDF unterstützt sowohl Blazor Server- als auch Blazor WebAssembly-Projekte. Im Blazor Server läuft die Rendering-Engine direkt auf dem Server. In Blazor WebAssembly erfordert die PDF-Erzeugung einen serverseitigen API-Endpunkt; der Architekturabschnitt in diesem Leitfaden erklärt beide Ansätze.

Wie kann ich eine PDF-Datei von einer URL in Blazor anzeigen?

Der direkteste Weg, einen Blazor PDF-Viewer zu erstellen, besteht darin, eine URL in ein PDF umzuwandeln und es in einem <iframe> anzuzeigen. IronPDFs ChromePdfRenderer ruft die Webseite ab und wandelt sie mit der gleichen Chrome-Rendering-Engine in PDF-Format um, die auch Google Chrome antreibt, wodurch CSS, JavaScript-Ausgabe und Layout originalgetreu beibehalten werden.

Razor-Komponentenansatz

Die folgende Razor-Komponente wandelt eine URL in ein PDF um und zeigt es inline an. Die GeneratePdf-Methode läuft auf dem Server in einer Blazor-Server-App, sodass die volle Chrome-Rendering-Engine verfügbar ist:

@page "/pdfviewer"
@using IronPdf

<h3>PDF Viewer</h3>
<button @onclick="GeneratePdf" class="btn btn-primary">Load PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task GeneratePdf()
    {
        var renderer = new ChromePdfRenderer();
        // Convert the URL to PDF using the Chrome rendering engine
        var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");
        // Encode the PDF bytes as a base64 data URI for iframe display
        var base64 = Convert.ToBase64String(pdf.BinaryData);
        pdfDataUri = $"data:application/pdf;base64,{base64}";
    }
}

C#-Beispiel auf oberster Ebene

Für Hintergrunddienste, Konsolen-Apps oder serverseitige API-Endpunkte erfolgt die gleiche Umwandlung mittels identischer API-Aufrufe außerhalb des Komponenten-Kontexts:

using IronPdf;

var renderer = new ChromePdfRenderer();
// Fetch and convert the target URL to a PDF document
var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");

// Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf");
byte[] pdfBytes = pdf.BinaryData;
using IronPdf;

var renderer = new ChromePdfRenderer();
// Fetch and convert the target URL to a PDF document
var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");

// Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf");
byte[] pdfBytes = pdf.BinaryData;
$vbLabelText   $csharpLabel

RenderUrlAsPdfAsync ruft die Seite ab, führt alle JavaScript-Befehle aus, wendet CSS an und gibt ein PdfDocument-Objekt zurück, das die gerenderte Ausgabe enthält. Die BinaryData-Eigenschaft bietet Zugriff auf die rohen PDF-Bytes zur Speicherung, zum Streaming oder zur Anzeige. Die <iframe> zeigt die Ausgabe mit einer integrierten Browser-Toolbar für Zoom, Navigation und Druck an.

Wie man einen Blazor PDF-Viewer mit IronPDF erstellt: Abbildung 1 - URL zu PDF PDF-Viewer-Ausgabe

Wie kann ich die PDF-Erzeugung anpassen?

IronPDF bietet durch die ChromePdfRenderOptions-Klasse eine Ausgabekontrolle. Sie können die Papiergröße festlegen, Ränder anpassen und Text- oder HTML-Kopf- und Fußzeilen zu jeder Seite hinzufügen. Der Rendering-Optionen-Leitfaden behandelt die vollständige Liste der verfügbaren Eigenschaften.

Razor-Komponentenansatz

Die folgende Komponente konfiguriert A4-Papier mit Rändern und fügt zu jeder Seite Kopf- und Fußzeilen-Text hinzu. Weisen Sie RenderingOptions zu, bevor Sie eine Render-Methode aufrufen, um sie global auf die Renderer-Instanz anzuwenden:

@page "/pdfcustom"
@using IronPdf

<h3>Customized PDF Viewer</h3>
<button @onclick="GenerateCustomizedPdf" class="btn btn-primary">Generate Customized PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task GenerateCustomizedPdf()
    {
        var renderer = new ChromePdfRenderer
        {
            RenderingOptions = new ChromePdfRenderOptions
            {
                PaperSize = IronPdf.Rendering.PdfPaperSize.A4,
                MarginTop = 25,
                MarginBottom = 25,
                MarginLeft = 20,
                MarginRight = 20,
                // Header with dynamic date replacement
                TextHeader = new TextHeaderFooter
                {
                    CenterText = "Monthly Report - {date}",
                    FontSize = 12
                },
                // Footer with page numbering
                TextFooter = new TextHeaderFooter
                {
                    LeftText = "Confidential",
                    RightText = "Page {page} of {total-pages}",
                    FontSize = 10
                }
            }
        };

        var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

C#-Beispiel auf oberster Ebene

Die gleichen Optionen gelten in jedem .NET-Kontext. Dieses Muster funktioniert gut innerhalb einer ASP.NET Core-Mindest-API oder eines geplanten Berichtserstellers:

using IronPdf;
using IronPdf.Rendering;

var renderer = new ChromePdfRenderer
{
    RenderingOptions = new ChromePdfRenderOptions
    {
        PaperSize = PdfPaperSize.A4,
        MarginTop = 25,
        MarginBottom = 25,
        TextHeader = new TextHeaderFooter { CenterText = "Report - {date}", FontSize = 12 },
        TextFooter = new TextHeaderFooter { RightText = "Page {page} of {total-pages}", FontSize = 10 }
    }
};

var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
pdf.SaveAs("customized-report.pdf");
using IronPdf;
using IronPdf.Rendering;

var renderer = new ChromePdfRenderer
{
    RenderingOptions = new ChromePdfRenderOptions
    {
        PaperSize = PdfPaperSize.A4,
        MarginTop = 25,
        MarginBottom = 25,
        TextHeader = new TextHeaderFooter { CenterText = "Report - {date}", FontSize = 12 },
        TextFooter = new TextHeaderFooter { RightText = "Page {page} of {total-pages}", FontSize = 10 }
    }
};

var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
pdf.SaveAs("customized-report.pdf");
$vbLabelText   $csharpLabel

Vorlagenvariablen einschließlich {page}, {total-pages} und {date} werden zur Renderzeit durch tatsächliche Werte ersetzt. Für komplexe Marken-Layouts verwenden Sie statt TextHeader und TextFooter die Eigenschaften HtmlHeader und HtmlFooter. Der Kopf- und Fußzeilen-Leitfaden enthält vollständige Beispiele für beide Ansätze.

Wie man einen Blazor PDF-Viewer mit IronPDF erstellt: Abbildung 2 - Angepasstes PDF in PDF-Viewer geöffnet

Was ist der beste Weg, um PDF-Downloads zu ermöglichen?

Die Anzeige von PDFs in einem <iframe> erledigt die Anzeige, aber Benutzer müssen häufig die Datei herunterladen. JavaScript-Interop löst einen Browser-Download aus einem .NET-Bytestream aus. Für weitere Download- und Exportmuster siehe den Export- und Speicher-PDF-Leitfaden.

Razor-Komponentenansatz

Injizieren Sie IJSRuntime in die Komponente und rufen Sie eine JavaScript-Hilfsfunktion auf, um den Download zu starten. Die DotNetStreamReference streamt die PDF-Bytes, ohne die gesamte Datei auf einmal in den JavaScript-Speicher zu laden:

@page "/pdfdownload"
@using IronPdf
@inject IJSRuntime JSRuntime

<h3>Download PDF</h3>
<button @onclick="DownloadPdf" class="btn btn-success">Download PDF</button>

@code {
    private async Task DownloadPdf()
    {
        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
        // Stream the PDF bytes to the browser as a downloadable file
        using var streamRef = new DotNetStreamReference(stream: new MemoryStream(pdf.BinaryData));
        await JSRuntime.InvokeVoidAsync("downloadFileFromStream", "invoice.pdf", streamRef);
    }
}

Fügen Sie diese JavaScript-Funktion in Ihre _Host.cshtml- oder App.razor-Datei ein, wie in der Microsoft-Dokumentation zur Blazor-JavaScript-Interop beschrieben:

window.downloadFileFromStream = async (fileName, contentStreamReference) => {
    const arrayBuffer = await contentStreamReference.arrayBuffer();
    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);
    const anchorElement = document.createElement('a');
    anchorElement.href = url;
    anchorElement.download = fileName ?? '';
    anchorElement.click();
    anchorElement.remove();
    URL.revokeObjectURL(url);
};
window.downloadFileFromStream = async (fileName, contentStreamReference) => {
    const arrayBuffer = await contentStreamReference.arrayBuffer();
    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);
    const anchorElement = document.createElement('a');
    anchorElement.href = url;
    anchorElement.download = fileName ?? '';
    anchorElement.click();
    anchorElement.remove();
    URL.revokeObjectURL(url);
};
JAVASCRIPT

C#-Beispiel auf oberster Ebene

In einem serverseitigen API-Endpunkt geben Sie die PDF-Bytes direkt mit Results.File zurück. Der Browser empfängt die Datei mit korrekten Content-Disposition-Headern und löst den Download automatisch aus:

using IronPdf;

// ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
    // Return with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "invoice.pdf");
});
using IronPdf;

// ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Invoice</h1><p>Total: $1,299</p>");
    // Return with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "invoice.pdf");
});
$vbLabelText   $csharpLabel

Wie kann ich PDFs aus Razor-Komponenten generieren?

Das Erzeugen von PDFs aus HTML bietet vollständige Kontrolle über Layout, Datenbindung und Styling. Dieser Ansatz eignet sich für Rechnungen, Berichte und jedes Dokument, das auf Live-Anwendungsdaten basiert. Für fortschrittlichere Rendering-Techniken siehe den Leitfaden zur HTML-zu-PDF-Umwandlung.

Razor-Komponentenansatz

Die untenstehende Komponente erstellt einen Rechnung-HTML-String aus C#-Daten und wandelt ihn in ein PDF um. Die ChromePdfRenderer behandelt den HTML-String ebenso wie eine Webseite, wendet alle CSS an und rendert ihn mit der Chrome-Engine:

@page "/invoicedemo"
@using IronPdf

<h3>Invoice Generator</h3>
<button @onclick="GenerateInvoice" class="btn btn-primary">Generate Invoice PDF</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; border:1px solid #ccc; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task GenerateInvoice()
    {
        var invoiceHtml = $@"
            <html>
            <head>
                <style>
                    body {{ font-family: Arial, sans-serif; }}
                    .header {{ background-color: #f0f0f0; padding: 20px; }}
                    .invoice-table {{ width: 100%; border-collapse: collapse; }}
                    .invoice-table th, .invoice-table td {{ border: 1px solid #ddd; padding: 8px; }}
                    .total {{ font-weight: bold; font-size: 18px; }}
                </style>
            </head>
            <body>
                <div class='header'>
                    <h1>Invoice #INV-2025-001</h1>
                    <p>Date: {DateTime.Now:MM/dd/yyyy}</p>
                </div>
                <table class='invoice-table'>
                    <thead>
                        <tr>
                            <th>Item</th><th>Quantity</th><th>Price</th><th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>IronPDF License</td><td>1</td><td>$749</td><td>$749</td>
                        </tr>
                        <tr>
                            <td>Priority Support</td><td>1</td><td>$250</td><td>$250</td>
                        </tr>
                    </tbody>
                </table>
                <p class='total'>Total Amount: $999</p>
            </body>
            </html>";

        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync(invoiceHtml);
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

C#-Beispiel auf oberster Ebene

Der gleiche HTML-String-Ansatz funktioniert in jedem .NET-Kontext, einschließlich Konsolen-Apps, Hintergrunddiensten und API-Endpunkten. C#-String-Interpolation oder eine Vorlagenbibliothek fügt dynamische Daten ein, bevor der String an den Renderer übergeben wird:

using IronPdf;

var html = """
    <html>
    <body>
        <h1>Invoice #INV-2025-001</h1>
        <table>
            <tr><th>Item</th><th>Total</th></tr>
            <tr><td>IronPDF License</td><td>$749</td></tr>
            <tr><td>Priority Support</td><td>$250</td></tr>
        </table>
        <p><strong>Total: $999</strong></p>
    </body>
    </html>
    """;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync(html);
pdf.SaveAs("invoice.pdf");
using IronPdf;

var html = """
    <html>
    <body>
        <h1>Invoice #INV-2025-001</h1>
        <table>
            <tr><th>Item</th><th>Total</th></tr>
            <tr><td>IronPDF License</td><td>$749</td></tr>
            <tr><td>Priority Support</td><td>$250</td></tr>
        </table>
        <p><strong>Total: $999</strong></p>
    </body>
    </html>
    """;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync(html);
pdf.SaveAs("invoice.pdf");
$vbLabelText   $csharpLabel

RenderHtmlAsPdfAsync akzeptiert jeden gültigen HTML-String, einschließlich Inline-CSS und eingebettetem JavaScript. Die Implementierung behandelt Layout, Schriftartendarstellung und Seitenumbrüche automatisch.

Wie man einen Blazor PDF-Viewer mit IronPDF erstellt: Abbildung 3 - Rechnungs-PDF im Viewer

Wie unterscheidet sich ein Blazor Server PDF-Viewer von Blazor WebAssembly?

Das Hosting-Modell bestimmt, wo die PDF-Erzeugung abläuft und wie die Bytes den Browser erreichen. Das Verständnis dieses Unterschieds vermeidet einen häufigen architektonischen Fehler beim Erstellen von Blazor PDF-Viewern.

Blazor Server führt allen C#-Code auf dem Server aus. ChromePdfRenderer läuft serverseitig, und die resultierenden Bytes werden über die bestehende SignalR-Verbindung an den Browser gesendet. Dies ist der einfachste Integrationsweg, der keine zusätzlichen API-Endpunkte oder Netzwerkanrufe über die in den vorherigen Abschnitten gezeigten hinaus erfordert.

Blazor WebAssembly läuft C# im Sandbox-Modus des Browsers mithilfe von WASM. Die Rendering-Engine von IronPDF hängt von nativen Binärdateien ab, die nicht innerhalb der Browser-Sandbox ausgeführt werden können, sodass ChromePdfRenderer nicht direkt in einem WASM-Projekt verfügbar ist. Der korrekte Ansatz besteht darin, einen serverseitigen API-Endpunkt aufzurufen, der die PDF-Erzeugung vornimmt und die Bytes als Antwort zurückgibt.

Einrichten eines PDF-Erzeugungs-APIs für Blazor WebAssembly

Definieren Sie auf dem Server einen minimalen API-Endpunkt, der das PDF erzeugt und zurückgibt:

// Program.cs (ASP.NET Core host project)
using IronPdf;

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

app.MapGet("/api/pdf/report", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Quarterly Report</h1><p>Generated server-side.</p>");
    // Return PDF bytes with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "report.pdf");
});
// Program.cs (ASP.NET Core host project)
using IronPdf;

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

app.MapGet("/api/pdf/report", async () =>
{
    var renderer = new ChromePdfRenderer();
    var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Quarterly Report</h1><p>Generated server-side.</p>");
    // Return PDF bytes with file download headers
    return Results.File(pdf.BinaryData, "application/pdf", "report.pdf");
});
$vbLabelText   $csharpLabel

Injizieren Sie HttpClient auf dem WASM-Client und rufen Sie den API-Endpunkt auf. Die Blazor-WASM-gehostete Projektschablone konfiguriert HttpClient, um die Basisadresse des Servers anzusteuern:

@page "/wasm-pdf-viewer"
@inject HttpClient Http

<h3>PDF Viewer</h3>
<button @onclick="LoadPdf" class="btn btn-primary">Load Report</button>
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task LoadPdf()
    {
        // Fetch PDF bytes from the server-side generation endpoint
        var bytes = await Http.GetByteArrayAsync("/api/pdf/report");
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(bytes)}";
    }
}

Dieses Muster hält alle schweren Rendering-Arbeiten auf dem Server, während der WASM-Client nur die Anzeige übernimmt. Für den Produktionseinsatz fügen Sie dem API-Endpunkt Authentifizierung hinzu und beschränken den generierten PDF-Inhalt auf die Daten des authentifizierten Benutzers.

Welche anderen PDF-Operationen kann ich durchführen?

Die API von IronPDF geht weit über die einfache Anzeige hinaus. Die folgenden Abschnitte behandeln vier Operationen, die häufig in Blazor-Dokumentenworkflows benötigt werden: das Zusammenführen mehrerer Dokumente, Hinzufügen von Anmerkungen, Anwenden des Passwortschutzes und das Anzeigen von benutzerhochgeladenen Dateien.

Wie füge ich mehrere PDF-Dokumente zusammen?

Das Zusammenführen kombiniert mehrere PdfDocument-Instanzen in eine einzige Datei, was nützlich ist, um Berichtsteile zusammenzustellen, Anhänge anzuhängen oder benutzergewählte Dateien zu verketten. Der Leitfaden zum Zusammenfügen und Aufteilen von PDFs behandelt Einfügungs- und Aufteilungsvorgänge auf Seitenebene.

using IronPdf;

var renderer = new ChromePdfRenderer();

// Generate two separate sections as individual PDF documents
var section1 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 1: Overview</h1>");
var section2 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 2: Details</h1>");

// Merge into a single document preserving all pages
var merged = PdfDocument.Merge(section1, section2);
merged.SaveAs("combined-report.pdf");
using IronPdf;

var renderer = new ChromePdfRenderer();

// Generate two separate sections as individual PDF documents
var section1 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 1: Overview</h1>");
var section2 = await renderer.RenderHtmlAsPdfAsync("<h1>Section 2: Details</h1>");

// Merge into a single document preserving all pages
var merged = PdfDocument.Merge(section1, section2);
merged.SaveAs("combined-report.pdf");
$vbLabelText   $csharpLabel

Um das zusammengeführte Dokument in einer Blazor-Komponente anzuzeigen, übergeben Sie merged.BinaryData an das Base64-Daten-URI-Muster aus den vorherigen Abschnitten. Das zusammengeführte PdfDocument-Objekt akzeptiert auch weitere Operationen (Wasserzeichen, Sicherheitseinstellungen oder zusätzliche Seitenanhänge), bevor es zur Anzeige kodiert wird.

Wie füge ich Anmerkungen zu einem PDF hinzu?

Anmerkungen fügen Prüfernotizen und Kommentare an bestimmten Seitenpositionen hinzu, ohne den zugrunde liegenden Dokumenteninhalt zu ändern. IronPDF unterstützt Textanmerkungen, Freitextfelder und andere Markup-Typen. Siehe den Leitfaden zu Anmerkungen für die vollständige Liste der Anmerkungseigenschaften.

using IronPdf;
using IronPdf.Annotations;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Contract Document</h1><p>Review required on clause 3.</p>");

// Add a text annotation to page 0 at position (50, 650)
var annotation = new TextAnnotation(pageIndex: 0)
{
    Title = "Reviewer Note",
    Contents = "Please confirm clause 3 before signing.",
    X = 50,
    Y = 650,
    Width = 200,
    Height = 50,
    Printable = false,
    OpenByDefault = true
};

pdf.Annotations.Add(annotation);
pdf.SaveAs("annotated-contract.pdf");
using IronPdf;
using IronPdf.Annotations;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Contract Document</h1><p>Review required on clause 3.</p>");

// Add a text annotation to page 0 at position (50, 650)
var annotation = new TextAnnotation(pageIndex: 0)
{
    Title = "Reviewer Note",
    Contents = "Please confirm clause 3 before signing.",
    X = 50,
    Y = 650,
    Width = 200,
    Height = 50,
    Printable = false,
    OpenByDefault = true
};

pdf.Annotations.Add(annotation);
pdf.SaveAs("annotated-contract.pdf");
$vbLabelText   $csharpLabel

Anmerkungen bleiben bestehen, wenn das PDF in jedem Standard-Viewer geöffnet wird, einschließlich der <iframe>-Anzeige im Browser. Für Blazor-Anwendungen führen Sie die Annotationslogik serverseitig aus und geben pdf.BinaryData zur Anzeige an die Komponente zurück.

Wie wende ich Passwortschutz auf ein PDF an?

Der Passwortschutz beschränkt den Zugriff auf sensible Dokumente wie Finanzberichte oder personenbezogene Akten. IronPDF unterstützt Benutzerpasswörter (zum Öffnen des Dokuments erforderlich) und Besitzerpasswörter (zum Ändern der Berechtigungen erforderlich). Der Leitfaden zur PDF-Sicherheit listet alle verfügbaren Berechtigungsflags auf.

using IronPdf;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Confidential Report</h1>");

// Set the password required to open the document
pdf.Password = "user-open-password";
// Set the owner password to control editing and printing rights
pdf.SecuritySettings.OwnerPassword = "owner-edit-password";
pdf.SecuritySettings.AllowUserPrinting = IronPdf.Security.PdfPrintSecurity.FullPrintRights;
pdf.SecuritySettings.AllowUserCopyPasteContent = false;

pdf.SaveAs("protected-report.pdf");
using IronPdf;

var renderer = new ChromePdfRenderer();
var pdf = await renderer.RenderHtmlAsPdfAsync("<h1>Confidential Report</h1>");

// Set the password required to open the document
pdf.Password = "user-open-password";
// Set the owner password to control editing and printing rights
pdf.SecuritySettings.OwnerPassword = "owner-edit-password";
pdf.SecuritySettings.AllowUserPrinting = IronPdf.Security.PdfPrintSecurity.FullPrintRights;
pdf.SecuritySettings.AllowUserCopyPasteContent = false;

pdf.SaveAs("protected-report.pdf");
$vbLabelText   $csharpLabel

Passwortgeschützte PDFs zeigen eine Passwortabfrage in der <iframe> des Browsers an. Dieser Ansatz funktioniert für Dokumente, die zum Download bereitgestellt werden; für die Anzeige ohne Abfrage, wenden Sie das Passwort nur auf über die Download-Route zurückgegebene Dokumente an.

Wie zeige ich benutzerhochgeladene PDFs an?

Um ein vom Benutzer hochgeladenes PDF anzuzeigen, müssen die eingehenden Dateibytes gelesen und als Daten-URI kodiert werden. Die folgende Upload-Komponente verwendet das InputFile-Steuerelement von Blazor, um die Datei zu erfassen und sie dann direkt ohne erneutes Rendering anzuzeigen:

@page "/upload-viewer"
@using IronPdf

<h3>Upload and View a PDF</h3>
<InputFile OnChange="LoadUploadedPdf" accept=".pdf" />
@if (!string.IsNullOrEmpty(pdfDataUri))
{
    <iframe src="@pdfDataUri" style="width:100%; height:600px; margin-top:20px;"></iframe>
}

@code {
    private string pdfDataUri = string.Empty;

    private async Task LoadUploadedPdf(InputFileChangeEventArgs e)
    {
        using var stream = e.File.OpenReadStream(maxAllowedSize: 10 * 1024 * 1024);
        using var ms = new MemoryStream();
        await stream.CopyToAsync(ms);
        var bytes = ms.ToArray();
        // Encode the uploaded PDF bytes directly for display
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(bytes)}";
    }
}

Für hochgeladene PDFs, die vor der Anzeige serverseitig verarbeitet werden müssen, wie Wasserzeichen, Seitenauszug oder erneute Verschlüsselung, laden Sie die Bytes zuerst in ein PdfDocument:

var pdf = new PdfDocument(bytes);
// Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
var pdf = new PdfDocument(bytes);
// Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
$vbLabelText   $csharpLabel

Dies beibehält die gleiche Komponentenstruktur, während die vollständige IronPDF-API auf die hochgeladene Datei angewendet wird.

Was sind meine nächsten Schritte?

Dieser Leitfaden behandelte den vollständigen Workflow für einen Blazor PDF-Viewer mit IronPDF: Installation auf .NET 10, URL- und HTML-Darstellung, Ausgabeanpassung mit Kopf- und Fußzeilen, JavaScript-Interop für Browser-Downloads, der architektonische Unterschied zwischen Blazor Server und Blazor WebAssembly sowie vier Dokumentenoperationen: Zusammenführung, Anmerkungen, Passwortschutz und Benutzeruploads.

Um diese Grundlage zu erweitern, erkunden Sie diese Ressourcen:

Holen Sie sich Ihre kostenlose Testlizenz, um Wasserzeichen zu entfernen und IronPDF in Ihrer gesamten Blazor-Anwendung zu testen. IronPDF unterstützt .NET 10, ASP.NET Core, Blazor Server und gehostete Blazor WebAssembly-Projekte ohne zusätzliche Konfiguration. Für zusätzliche Integrationsanleitungen siehe Microsofts offizielle Blazor-Dokumentation.

Häufig gestellte Fragen

Was ist ein Blazor PDF-Viewer?

Ein Blazor-PDF-Viewer ist eine Komponente, die PDF-Dokumente inline in einer Blazor-Server- oder WebAssembly-Anwendung anzeigt. Er konvertiert typischerweise PDF-Bytes in eine Base64-Daten-URI und rendert sie innerhalb eines iFrame-Elements, wodurch Nutzern eine eingebaute Browser-Symbolleiste für Zoom, Navigation und Drucken zur Verfügung steht.

Wie zeige ich ein PDF in einer Blazor Server-Anwendung an?

Installieren Sie IronPDF über NuGet, fügen Sie Ihren Lizenzschlüssel zu Program.cs hinzu und verwenden Sie dann ChromePdfRenderer, um PDF-Bytes aus einer URL oder einem HTML-String zu generieren. Codieren Sie die Bytes als Base64-Daten-URI und weisen Sie diese dem src-Attribut eines iFrames in Ihrer Razor-Komponente zu.

Kann IronPDF in einem Blazor WebAssembly-Projekt laufen?

IronPDFs Rendering-Engine erfordert native Binärdateien, die nicht im WASM-Sandbox des Browsers laufen können. Für Blazor-WebAssembly-Projekte erstellen Sie einen serverseitigen ASP.NET Core API-Endpunkt, der das PDF mit IronPDF generiert und die Bytes zurückgibt. Der WASM-Client ruft diesen Endpunkt über HttpClient auf und zeigt das Ergebnis an.

Wie löse ich einen PDF-Download in Blazor aus?

Injizieren Sie IJSRuntime in Ihre Komponente, generieren Sie PDF-Bytes mit IronPDF, wickeln Sie sie in eine DotNetStreamReference und rufen Sie eine JavaScript-Funktion mit InvokeVoidAsync auf. Die JavaScript-Funktion erstellt eine Blob-URL und klickt auf ein Ankerelement, um den Browser-Download auszulösen.

Welche Vorteile bietet IronPDF für die Anzeige von PDFs in Blazor?

IronPDF verwendet eine Chrome-Rendering-Engine, die HTML-, CSS- und JavaScript-Ausgaben genau in das PDF-Format umwandelt. Es unterstützt .NET 10, arbeitet in Blazor-Server- und WebAssembly-Architekturen und bietet eine einzige API für die PDF-Erstellung, das Zusammenführen, Anmerkungen, Passwortschutz und Benutzer-Upload-Verarbeitung.

Wie füge ich Kopf- und Fußzeilen zu einem in Blazor generierten PDF hinzu?

Setzen Sie die RenderingOptions-Eigenschaft auf ChromePdfRenderer, bevor Sie eine Render-Methode aufrufen. Verwenden Sie TextHeader und TextFooter für einfache Textkopf- und Fußzeilen mit Template-Variablen wie {page}, {total-pages} und {date}. Für HTML-basierte Layouts verwenden Sie stattdessen HtmlHeader und HtmlFooter.

Wie fusioniere ich mehrere PDF-Dokumente in Blazor?

Generieren Sie jedes Dokument als PdfDocument-Instanz mit Hilfe von ChromePdfRenderer und rufen Sie dann PdfDocument.Merge(pdf1, pdf2) auf, um sie zu kombinieren. Übergeben Sie die Binärdaten des zusammengeführten Dokuments an die Base64-Daten-URI Ihrer Blazor-Komponente, um das kombinierte Ergebnis anzuzeigen.

Kann ich ein vom Benutzer hochgeladenes PDF in Blazor anzeigen, ohne es auf die Festplatte zu speichern?

Ja. Verwenden Sie Blazors InputFile-Komponente, um die hochgeladene Datei in einen MemoryStream zu lesen, konvertieren Sie die Bytes in eine Base64-Daten-URI und weisen Sie diese dem src-Attribut eines iFrames zu. Es ist kein Dateisystemschreiben erforderlich. Für serverseitige Verarbeitung laden Sie die Bytes in eine PdfDocument-Instanz, bevor Sie diese kodieren.

Wie wende ich Passwortschutz auf ein in Blazor generiertes PDF an?

Nachdem Sie das PdfDocument generiert haben, setzen Sie die Password-Eigenschaft für das Benutzer-Öffnen-Passwort und verwenden Sie SecuritySettings.OwnerPassword für das Eigentümer-Passwort. Verwenden Sie SecuritySettings.AllowUserPrinting und AllowUserCopyPasteContent, um Berechtigungen zu steuern, bevor Sie das Dokument speichern oder kodieren.

Ist IronPDF mit .NET 10 für Blazor PDF-Viewer-Projekte kompatibel?

Ja. IronPDF unterstützt .NET 10, .NET 9, .NET 8, .NET 6 und .NET Framework 4.6.2 und später. Keine spezielle Konfiguration ist erforderlich, um IronPDF in einer Blazor-Anwendung einzusetzen, die .NET 10 anvisiert.

Curtis Chau
Curtis Chau
  Jetzt mit dem Ingenieurteam chatten
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 ...

Weiterlesen

Verwandte Artikel

30-Tage-Testversion → Volles Produkt. Keine Grenzen. Keine Karte. Gratis testen

Iron Support Team

We're online 24 hours, 5 days a week.
Chat
Email
Call Me