So erstellen Sie einen Blazor-PDF-Viewer: Serverseitige PDF-Generierung leicht gemacht

Wie richte ich IronPDF in einem Blazor Server-Projekt ein?

Der Einstieg mit IronPDF in Ihrem Blazor Server PDF-Viewer-Projekt erfordert nur wenige Schritte. Installieren Sie zuerst das IronPDF NuGet-Paket mit der Paket-Manager-Konsole:

Install-Package IronPdf

Alternativ können Sie den NuGet-Paket-Manager-Benutzeroberfläche verwenden, um nach "IronPDF" zu suchen und die neueste Version auszuwählen.

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 in die Datei Program.cs ein, um die volle Funktionalität freizuschalten:

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

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

Für Entwicklung und Tests funktioniert IronPDF ohne Lizenzschlüssel, fügt jedoch ein Wasserzeichen zu generierten PDFs hinzu. Sie können eine kostenlose Testlizenz erhalten, um das Wasserzeichen während der Entwicklung zu entfernen. IronPDF unterstützt sowohl Blazor Server- als auch Blazor WebAssembly-Apps, sodass Sie PDF-Erstellung und -Anzeige zu Desktop-, mobilen Apps oder sogar .NET MAUI-Projekten hinzufügen können.

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

Der einfachste Weg, einen PDF-Viewer in Blazor zu erstellen, besteht darin, eine URL in ein PDF umzuwandeln und sie in einem iframe anzuzeigen. Die ChromePdfRenderer-Klasse von IronPDF übernimmt die Konvertierung mit ihrer Chrome-Rendering-Engine und erhält alle Formatierungen und JavaScript-Funktionalitäten der ursprünglichen Webseite.

Hier ist eine vollständige Razor-Komponente, die eine URL als PDF rendert:

@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 URL to PDF
        var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");
        // Convert to base64 and create data URI for iframe display
        var base64String = Convert.ToBase64String(pdf.BinaryData);
        pdfDataUri = $"data:application/pdf;base64,{base64String}";
    }
}

@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 URL to PDF
        var pdf = await renderer.RenderUrlAsPdfAsync("https://ironpdf.com");
        // Convert to base64 and create data URI for iframe display
        var base64String = Convert.ToBase64String(pdf.BinaryData);
        pdfDataUri = $"data:application/pdf;base64,{base64String}";
    }
}

Die RenderUrlAsPdfAsync-Methode ruft den Webseiteninhalt ab, konvertiert ihn in das PDF-Format und rendert ihn in Ihrer Blazor-PDF-Viewer-Komponente. Dieser Ansatz funktioniert sowohl auf Desktops als auch auf Mobiltelefonen mit einer integrierten Symbolleiste zum Navigieren, Zoomen und Drucken von PDFs. Das geladene PDF-Dokument sollte ähnlich wie im folgenden Ausgabebild erscheinen:

Wie kann ich die PDF-Erzeugung anpassen?

IronPDF bietet umfangreiche Anpassungsoptionen über die ChromePdfRenderOptions-Klasse für Ihre Blazor-PDF-Viewer-Komponente. Sie können Kopfzeilen, Fußzeilen hinzufügen, Ränder anpassen und das Seitenlayout steuern, um professionell aussehende Dokumente zu erstellen. Erfahren Sie mehr über Rendering-Optionen in der Dokumentation.

@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();
        // Assign rendering options to the renderer
        renderer.RenderingOptions = new ChromePdfRenderOptions
        {
            PaperSize = IronPdf.Rendering.PdfPaperSize.A4,
            MarginTop = 25,
            MarginBottom = 25,
            MarginLeft = 20,
            MarginRight = 20,
            // Add header with title
            TextHeader = new TextHeaderFooter
            {
                CenterText = "Monthly Report - {date}",
                FontSize = 12
            },
            // Add footer with page numbers
            TextFooter = new TextHeaderFooter
            {
                LeftText = "Confidential",
                RightText = "Page {page} of {total-pages}",
                FontSize = 10
            }
        };
        // Now generate with options applied
        var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
        // Display in iframe
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

@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();
        // Assign rendering options to the renderer
        renderer.RenderingOptions = new ChromePdfRenderOptions
        {
            PaperSize = IronPdf.Rendering.PdfPaperSize.A4,
            MarginTop = 25,
            MarginBottom = 25,
            MarginLeft = 20,
            MarginRight = 20,
            // Add header with title
            TextHeader = new TextHeaderFooter
            {
                CenterText = "Monthly Report - {date}",
                FontSize = 12
            },
            // Add footer with page numbers
            TextFooter = new TextHeaderFooter
            {
                LeftText = "Confidential",
                RightText = "Page {page} of {total-pages}",
                FontSize = 10
            }
        };
        // Now generate with options applied
        var pdf = await renderer.RenderUrlAsPdfAsync("https://example.com/report");
        // Display in iframe
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

Die Template-Variablen wie {page}, {total-pages} und {date} werden während der PDF-Erstellung in Ihrem Blazor-PDF-Viewer automatisch durch tatsächliche Werte ersetzt. Sie können auch die HtmlHeader- und HtmlFooter-Eigenschaften für komplexere Layouts mit HTML-Inhalt verwenden. Dies stellt sicher, dass Ihr Blazor-PDF-Viewer leistungsstarke Dokumente mit korrektem Layout, Branding und Formularfeldern rendert, wo dies erforderlich ist. Für eine detaillierte Anpassung von Kopf- und Fußzeilen siehe den Kopf- und Fußzeilen-Leitfaden.

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

Während das Anzeigen von PDFs in Blazor in einem iframe für die Anzeige gut funktioniert, müssen Benutzer das Dokument oft herunterladen. Sie können dies mit JavaScript InterOp implementieren, um einen Browser-Download auszulösen. Für weitere Download-Optionen besuchen Sie unseren Leitfaden zum Exportieren und Speichern von PDFs:

@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>");
        using var streamRef = new DotNetStreamReference(stream: new MemoryStream(pdf.BinaryData));
        await JSRuntime.InvokeVoidAsync("downloadFileFromStream", "invoice.pdf", streamRef);
    }
}

@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>");
        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-Datei ein (wie in Microsofts Blazor JavaScript InterOp-Dokumentation beschrieben):

<script>
    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);
    }
</script>

<script>
    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);
    }
</script>

Wie kann ich PDFs aus Razor-Komponenten generieren?

Eine der leistungsfähigsten Funktionen zum Anzeigen von PDFs in Blazor ist die direkte Generierung von PDFs aus HTML-Inhalt, einschließlich dynamischer Daten. Dieser Ansatz eignet sich perfekt für die Erstellung von Rechnungen, Berichten oder datengetriebenen Dokumenten. Schauen Sie sich unseren Leitfaden zur HTML-zu-PDF-Konvertierung an, um fortgeschrittenere Techniken zu erlernen:

@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-2024-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>$799</td>
                            <td>$799</td>
                        </tr>
                        <tr>
                            <td>Priority Support</td>
                            <td>1</td>
                            <td>$250</td>
                            <td>$250</td>
                        </tr>
                    </tbody>
                </table>
                <p class='total'>Total Amount: $1,199</p>
            </body>
            </html>";
        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync(invoiceHtml);
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

@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-2024-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>$799</td>
                            <td>$799</td>
                        </tr>
                        <tr>
                            <td>Priority Support</td>
                            <td>1</td>
                            <td>$250</td>
                            <td>$250</td>
                        </tr>
                    </tbody>
                </table>
                <p class='total'>Total Amount: $1,199</p>
            </body>
            </html>";
        var renderer = new ChromePdfRenderer();
        var pdf = await renderer.RenderHtmlAsPdfAsync(invoiceHtml);
        pdfDataUri = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.BinaryData)}";
    }
}

Diese Methode gibt Ihnen vollständige Kontrolle über den PDF-Inhalt und das Styling in Ihrem Blazor-PDF-Viewer und ermöglicht es Ihnen, pixelgenaue Dokumente aus Ihren Anwendungsdaten zu erstellen. Für komplexere HTML-Rendering-Szenarien erkunden Sie unsere HTML-zu-PDF-Tutorials.

Welche anderen PDF-Operationen kann ich durchführen?

IronPDF bietet viele weitere Tools und Erweiterungen über die grundlegende Ansicht hinaus:

• Zusammenführen von PDF-Seiten zu einem einzigen Dokument
• Hinzufügen von Anmerkungen und Bearbeitungsfunktionen
• Anwenden von Passwortschutz und Sicherheit
• Hochladen aktivieren und dynamisch Tabellendatenberichte erstellen

Jeder dieser Punkte erweitert die Übersicht darüber, was in einer Blazor-PDF-Viewer-Komponente möglich ist, und gibt Entwicklern vollständige Kontrolle über Daten, Projekt-Workflows und Beispielanwendungen. Für detailliertere Informationen zu diesen Funktionen sehen Sie sich die Anleitungen zum Zusammenführen von PDFs, Wasserzeichen und PDF-Sicherheit an.

Abschluss

Sie haben nun die Grundlagen für die Implementierung eines PDF-Viewers in Ihrer Blazor-Server-Anwendung mit IronPDF. Von der grundlegenden URL-Rendering über die dynamische komponentenbasierte Generierung bietet IronPDF die Werkzeuge, die benötigt werden, um PDF-Anforderungen in modernen Webanwendungen zu erfüllen. Für zusätzliche Blazor-Entwicklungsressourcen sollten Sie die offizielle Blazor-Dokumentation von Microsoft erkunden.

Die Kombination aus IronPDFs Chrome-Rendering-Engine und Blazors Komponentenmodell schafft eine leistungsstarke Lösung für das Generieren und Anzeigen professioneller PDF-Dokumente direkt im Browser und eliminiert die Notwendigkeit für externe PDF-Viewer oder Plugins.

Bereit, PDF-Funktionalität in Ihrer Blazor-Anwendung zu implementieren? Starten Sie Ihre kostenlose Testversion, um die perfekte Lösung für Ihr Projekt zu finden.