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 konvertiert und das Ergebnis in ein <iframe>-Element lädt. IronPDF's ChromePdfRenderer konvertiert HTML-Strings, Live-URLs oder dynamische Inhalte in PDF-Bytes in einem einzigen asynchronen Aufruf und bietet Blazor Server- und Blazor WebAssembly-Anwendungen die volle PDF-Generierungs- und Anzeigefunktion ohne externe Viewer-Plugins.

Geschäftsanwendungen müssen regelmäßig Rechnungen, Verträge und Berichte anzeigen, ohne die Benutzer auf einen separaten Tab umzuleiten oder auf die Browser-PDF-Unterstützung angewiesen zu sein, die je nach Gerät variiert. Das Komponentenmodell von Blazor ermöglicht es, auf dem Server unkompliziert ein PDF zu generieren, es zu kodieren und in jede beliebige Seitenkomponente einzubinden, vorausgesetzt, die Bibliothek übernimmt die Konvertierung zuverlässig.

Dieser Leitfaden behandelt die Installation, das URL- und HTML-basierte Rendering, die 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, Annotationen, Passwortschutz und Anzeige von vom Benutzer hochgeladenen Dateien. Für jede Technik werden Razor Komponenten und entsprechende C#-Beispiele auf oberster Ebene bereitgestellt.

Starten Sie eine kostenlose Testversion von IronPDF , um die Beispiele in diesem Leitfaden nachzuvollziehen.

Wie beginne ich mit IronPDF in einem Blazor -Projekt?

Für den Einstieg ist die Installation des NuGet Pakets und das Hinzufügen eines Lizenzschlüssels zu Program.cs erforderlich. Installieren Sie IronPDF über die Paket-Manager-Konsole:

Install-Package IronPdf

Alternativ können Sie in der Benutzeroberfläche des NuGet -Paketmanagers nach " IronPDF " suchen und die neueste Version auswählen.

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 vor allen PDF-Operationen zu Program.cs hinzu:

IronPdf.License.LicenseKey = "YOUR-LICENSE-KEY-HERE";
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 höher. Für Entwicklungs- und Testzwecke funktioniert die Bibliothek ohne Lizenzschlüssel, versieht die generierten PDFs jedoch mit einem Wasserzeichen. Eine kostenlose Testlizenz entfernt das Wasserzeichen während der Testphase.

IronPDF unterstützt sowohl Blazor Server- als auch Blazor WebAssembly-Projekte. Bei Blazor Server läuft die Rendering-Engine direkt auf dem Server. In Blazor WebAssembly ist für die PDF-Generierung ein serverseitiger API-Endpunkt erforderlich; Im Abschnitt "Architektur" weiter unten in diesem Leitfaden werden beide Ansätze erläutert.

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. IronPDF's ChromePdfRenderer ruft die Webseite ab und konvertiert sie in das PDF-Format unter Verwendung derselben Chrome-Rendering-Engine, die auch Google Chrome antreibt, wobei CSS, JavaScript Ausgabe und Layout originalgetreu erhalten bleiben.

Razor -Komponentenansatz

Die folgende Razor Komponente wandelt eine URL in ein PDF um und zeigt es direkt im Text an. Die Methode GeneratePdf wird serverseitig in einer Blazor -Server-Anwendung ausgeführt, sodass die volle Leistungsfähigkeit der Chrome-Rendering-Engine zur Verfügung steht.

@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, Konsolenanwendungen oder serverseitige API-Endpunkte werden für dieselbe Konvertierung identische API-Aufrufe außerhalb eines Komponentenkontexts verwendet:

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;
Imports IronPdf

Dim renderer As New ChromePdfRenderer()
' Fetch and convert the target URL to a PDF document
Dim pdf = Await renderer.RenderUrlAsPdfAsync("https://ironpdf.com")

' Save to disk or use BinaryData for in-memory operations
pdf.SaveAs("output.pdf")
Dim pdfBytes As Byte() = pdf.BinaryData
$vbLabelText   $csharpLabel

RenderUrlAsPdfAsync ruft die Seite ab, führt den gesamten JavaScript aus, wendet CSS an und gibt ein PdfDocument-Objekt zurück, das die gerenderte Ausgabe enthält. Die Eigenschaft BinaryData stellt die rohen PDF-Bytes zum Speichern, Streamen oder Anzeigen bereit. Der <iframe> zeigt die Ausgabe mit einer integrierten Browser-Symbolleiste zum Zoom, Navigieren und Drucken an.

So erstellen Sie einen Blazor PDF-Viewer mit IronPDF: Abbildung 1 – URL zur PDF-Viewer-Ausgabe

Wie kann ich die PDF-Erzeugung anpassen?

IronPDF bietet Ausgabesteuerung über die Klasse ChromePdfRenderOptions. Sie können das Papierformat festlegen, die Seitenränder anpassen und jeder Seite Text- oder HTML-Kopf- und Fußzeilen hinzufügen. Der Leitfaden zu den Rendering-Optionen enthält die vollständige Liste der verfügbaren Eigenschaften.

Razor -Komponentenansatz

Die folgende Komponente konfiguriert A4-Papier mit Rändern und fügt jeder Seite Kopf- und Fußzeilentext hinzu. Weisen Sie RenderingOptions vor dem Aufruf einer Render-Methode zu, 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 eignet sich gut für eine minimale ASP.NET Core -API oder einen Generator für geplante Berichte:

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");
Imports IronPdf
Imports IronPdf.Rendering

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

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

Template-Variablen wie {page}, {total-pages} und {date} werden zur Renderzeit durch tatsächliche Werte ersetzt. Verwenden Sie für komplexe, markenspezifische Layouts die Eigenschaften HtmlHeader und HtmlFooter anstelle von TextHeader und TextFooter. Der Leitfaden für Kopf- und Fußzeilen enthält vollständige Beispiele für beide Vorgehensweisen.

So erstellen Sie einen Blazor PDF-Viewer mit IronPDF: Abbildung 2 – Angepasstes PDF im PDF-Viewer geöffnet

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

Die Anzeige von PDFs in einem <iframe>-Fenster ermöglicht zwar die Ansicht, Benutzer müssen die Datei jedoch häufig herunterladen. JavaScript Interop löst einen Browser-Download aus einem .NET Bytestream aus. Weitere Download- und Exportmuster finden Sie in der Anleitung zum Exportieren und Speichern von PDFs .

Razor -Komponentenansatz

Füge IJSRuntime in die Komponente ein und rufe eine JavaScript Hilfsfunktion auf, um den Download zu initiieren. Der 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 Ihrer _Host.cshtml- oder App.razor-Datei hinzu, wie in der Blazor JavaScript Interop-Dokumentation von Microsoft 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 werden die PDF-Bytes direkt mit Results.File zurückgegeben. Der Browser empfängt die Datei mit den korrekten Content-Disposition Headern und startet den Download automatisch:

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");
});
Imports IronPdf

' ASP.NET Core minimal API endpoint
app.MapGet("/api/pdf/invoice", Async Function()
    Dim renderer As New ChromePdfRenderer()
    Dim 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")
End Function)
$vbLabelText   $csharpLabel

Wie kann ich PDFs aus Razor-Komponenten generieren?

Die Generierung von PDFs aus HTML ermöglicht die vollständige Kontrolle über Layout, Datenbindung und Styling. Dieser Ansatz eignet sich für Rechnungen, Berichte und alle Dokumente, die aus Live-Anwendungsdaten erstellt werden. Weitere Informationen zu fortgeschrittenen Rendering-Techniken finden Sie im Leitfaden zur HTML-zu-PDF-Konvertierung .

Razor -Komponentenansatz

Die unten stehende Komponente erstellt aus C#-Daten eine HTML-Zeichenfolge für eine Rechnung und konvertiert diese in ein PDF. Der ChromePdfRenderer behandelt die HTML-Zeichenkette wie eine Webseite, wendet das gesamte CSS an und rendert sie 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 Ansatz mit HTML-Strings funktioniert in jedem .NET Kontext, einschließlich Konsolenanwendungen, Hintergrunddiensten und API-Endpunkten . C#-Stringinterpolation oder eine Template-Bibliothek 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");
Imports IronPdf

Dim html As String = "
    <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>
    "

Dim renderer As New ChromePdfRenderer()
Dim pdf = Await renderer.RenderHtmlAsPdfAsync(html)
pdf.SaveAs("invoice.pdf")
$vbLabelText   $csharpLabel

RenderHtmlAsPdfAsync akzeptiert jede gültige HTML-Zeichenkette, einschließlich Inline-CSS und eingebettetem JavaScript. Die Implementierung übernimmt Layout, Schriftwiedergabe und Seitenumbrüche automatisch.

So erstellen Sie einen Blazor PDF-Viewer mit IronPDF: Abbildung 3 – PDF-Rechnung im Viewer

Worin unterscheidet sich ein Blazor Server PDF Viewer von einem Blazor WebAssembly?

Das Hosting-Modell bestimmt, wo die PDF-Generierung stattfindet und wie die Bytes den Browser erreichen. Das Verständnis dieser Unterscheidung verhindert einen häufigen Architekturfehler beim Erstellen von Blazor PDF-Viewern.

Der Blazor Server führt den gesamten C#-Code auf dem Server aus. ChromePdfRenderer wird serverseitig ausgeführt, 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 Netzwerkaufrufe erfordert, die über die in den vorherigen Abschnitten gezeigten hinausgehen.

Blazor WebAssembly führt C# in der Sandbox des Browsers mithilfe von WASM aus. Die Rendering-Engine von IronPDF ist auf native Binärdateien angewiesen, die nicht innerhalb der Browser-Sandbox ausgeführt werden können, daher ist ChromePdfRenderer in einem WASM-Projekt nicht direkt verfügbar. Der richtige Ansatz besteht darin, einen serverseitigen API-Endpunkt aufzurufen, der die PDF-Generierung durchführt und die Bytes als Antwort zurückgibt.

Einrichten einer PDF-Generierungs-API für Blazor WebAssembly

Definieren Sie auf dem Server einen minimalen API-Endpunkt, der das PDF generiert 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");
});
Imports IronPdf

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

app.MapGet("/api/pdf/report", Async Function()
    Dim renderer = New ChromePdfRenderer()
    Dim 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")
End Function)
$vbLabelText   $csharpLabel

Im WASM-Client wird HttpClient eingefügt und der API-Endpunkt aufgerufen. Die Blazor WASM-Projektvorlage konfiguriert HttpClient vorab so, dass die Basisadresse des Servers als Zieladresse verwendet wird:

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

Bei diesem Muster verbleiben alle rechenintensiven Rendering-Arbeiten auf dem Server, während der WASM-Client sich nur um die Anzeige kümmert. Für den Produktiveinsatz muss eine Authentifizierung zum API-Endpunkt hinzugefügt und der generierte PDF-Inhalt auf die Daten des authentifizierten Benutzers beschränkt werden.

Welche anderen PDF-Operationen kann ich durchführen?

Die IronPDF-API bietet weit mehr als nur die einfache Anzeige. Die folgenden Abschnitte behandeln vier Operationen, die häufig in Blazor -Dokumentenworkflows benötigt werden: das Zusammenführen mehrerer Dokumente, das Hinzufügen von Anmerkungen, das Anwenden eines Passwortschutzes und das Anzeigen von vom Benutzer hochgeladenen Dateien.

Wie kann ich mehrere PDF-Dokumente zusammenführen?

Durch das Zusammenführen werden mehrere PdfDocument-Instanzen zu einer einzigen Datei kombiniert. Dies ist nützlich, um Berichtsabschnitte zusammenzustellen, Anhänge anzuhängen oder vom Benutzer ausgewählte Dateien zu verketten. Der Leitfaden zum Zusammenführen und Aufteilen von PDFs behandelt Einfüge- 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");
Imports IronPdf

Dim renderer As New ChromePdfRenderer()

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

' Merge into a single document preserving all pages
Dim 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 codiert wird.

Wie füge ich einer PDF-Datei Anmerkungen hinzu?

Anmerkungen fügen den Anmerkungen und Kommentaren der Gutachter bestimmte Seitenpositionen hinzu, ohne den zugrunde liegenden Dokumentinhalt zu verändern. IronPDF unterstützt Textanmerkungen, Freitextfelder und weitere Auszeichnungstypen. Eine vollständige Liste der Anmerkungseigenschaften finden Sie im Anmerkungsleitfaden .

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");
Imports IronPdf
Imports IronPdf.Annotations

Dim renderer As New ChromePdfRenderer()
Dim 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)
Dim annotation As New TextAnnotation(pageIndex:=0) With {
    .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 erhalten, wenn die PDF-Datei in einem beliebigen Standard-Viewer geöffnet wird, einschließlich der Browseranzeige. Bei Blazor Anwendungen wird die Annotationslogik serverseitig ausgeführt und pdf.BinaryData zur Anzeige an die Komponente zurückgegeben.

Wie kann ich eine PDF-Datei mit einem Passwort schützen?

Der Passwortschutz beschränkt den Zugriff auf sensible Dokumente wie Finanzberichte oder Personalakten. IronPDF unterstützt Benutzerpasswörter (erforderlich zum Öffnen des Dokuments) und Besitzerpasswörter (erforderlich zum Ändern von Berechtigungen). Die PDF-Sicherheitsanleitung 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");
Imports IronPdf

Dim renderer As New ChromePdfRenderer()
Dim 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 im Browser eine Passwortabfrage an <iframe>. Diese Vorgehensweise funktioniert für Dokumente, die per Download verteilt werden; Bei der Anzeige ohne Eingabeaufforderung sollte das Passwort nur auf Dokumente angewendet werden, die über den Download-Weg abgerufen werden.

Wie kann ich vom Benutzer hochgeladene PDFs anzeigen?

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

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

Bei hochgeladenen PDFs, die vor der Anzeige eine serverseitige Verarbeitung erfordern, wie z. B. Wasserzeichen , Seitenextraktion 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)}";
Dim pdf As New PdfDocument(bytes)
' Apply operations, then re-encode
pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}"
$vbLabelText   $csharpLabel

Dadurch bleibt die Komponentenstruktur erhalten, während gleichzeitig die volle IronPDF -API für die hochgeladene Datei aktiviert wird.

Was sind meine nächsten Schritte?

Dieser Leitfaden beschreibt den kompletten Workflow für einen Blazor PDF-Viewer mit IronPDF: Installation unter .NET 10, URL- und HTML-Rendering, Anpassung der Ausgabe mit Kopf- und Fußzeilen, JavaScript Interoperabilität für Browser-Downloads, die architektonischen Unterschiede zwischen Blazor Server und Blazor WebAssembly sowie vier Dokumentoperationen: Zusammenführen, Annotationen, Passwortschutz und Benutzer-Uploads.

Um diese Grundlage zu erweitern, können Sie folgende Ressourcen nutzen:

Sichern Sie sich Ihre kostenlose Testlizenz , um Wasserzeichen zu entfernen und IronPDF in Ihrer Blazor Anwendung zu testen. IronPDF unterstützt .NET 10 , ASP.NET Core, Blazor Server und gehostete Blazor WebAssembly-Projekte ohne zusätzliche Konfiguration. Weitere Hinweise zur Integration finden Sie in der offiziellen Blazor Dokumentation von Microsoft .

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

Wir sind 24 Stunden am Tag, 5 Tage die Woche online.
Chat
E-Mail
Rufen Sie mich an