Blazor PDF Viewer Tutorial

Einführung

Adobe entwickelte das Portable Document Format (PDF)die für die Veröffentlichung von formatiertem Text und Bildern weit verbreitet ist. In diesem Tutorial wird IronPDF zur Integration in eine Blazor Server-seitige Anwendung um ein PDF anzuzeigen, weil es einfach und effizient ist.

1. IronPDF-Funktionen

Mit Hilfe der leistungsstarken IronPDF PDF for .NET-Bibliothek können Entwickler problemlos PDF-Dokumente erstellen, lesen und ändern. Auf der Grundlage der eingebaute Chrome-EngineironPDF verfügt über eine Vielzahl nützlicher und leistungsstarker Funktionen, wie z. B. die Möglichkeit, HTML5, JavaScript, CSS und Bilder in PDFs zu konvertieren, benutzerdefinierte Kopf- und Fußzeilen zu PDFs hinzuzufügen und PDFs zu erstellen, die genau so aussehen, wie sie in einem Webbrowser angezeigt werden.

IronPDF unterstützt mehrere Webtechnologien, darunter HTML, ASPX, Razor View und MVC. Die wichtigsten Merkmale von IronPDF sind

• IronPDF bietet volle Kontrolle über die Erstellung und Änderung von PDF-Dateien innerhalb von .NET C#-Anwendungen
• IronPDF kann pDF-Dateien von Webseiten aus deren URLs generieren mit spezifischen User-Agent-, Proxy-, Header- und Cookie-Konfigurationen.
• IronPDF kann Bilder aus bestehenden PDF-Dokumenten löschen
• IronPDF kann Text, Fotos und Lesezeichen hinzufügen, wasserzeichenund andere Elemente in PDF-Dokumenten
• IronPDF hat mehrere Funktionen, die zusammenführen und aufteilen ein oder mehrere PDF-Dokumente leicht
• IronPDF kann Web-Medieninhalte wie CSS und JavaScript verstehen und darstellen
• IronPDF unterstützt verschiedene .NET-Desktop- und MVC-Webanwendungs-Frameworks, einschließlich ASP.NET und Blazor

2. Was ist Blazor?

Blazor ist ein experimentelles Webanwendungs-Framework, das es ermöglicht, clientseitige Webanwendungen in C# und HTML unter Verwendung von Web Assembly zu erstellen.

Web Assembly-Anwendungen werden in einem binären Befehlsformat an den Browser gesendet, das mit nahezu natürlicher Geschwindigkeit arbeitet. Dies hat neue Möglichkeiten für Sprachen wie C# geschaffen, die innerhalb des Browsers ausgeführt werden können.

Erstellen eines neuen Projekts in Visual Studio

Öffnen Sie zunächst die Anwendung Microsoft Visual Studio und wählen Sie im Menü "Datei" die Option "Neues Projekt". Wählen Sie dann "Blazor Server App".

Erstellen eines neuen Projekts in Visual Studio

Geben Sie einen Projektnamen ein und wählen Sie einen Dateipfad. Klicken Sie dann auf die Schaltfläche Erstellen.

Erstellen eines neuen Projekts in Visual Studio

Wählen Sie außerdem das gewünschte .NET-Framework aus. Es wird empfohlen, aus Gründen der Stabilität die neueste Version zu verwenden.

Auswahl des .NET 6.0-Frameworks für die neue Blazor Server App

Microsoft Visual Studio wird nun die Struktur für die neue Blazor Server App generieren. Dieses Projekt wird eine Sammlung von `.razor'-Dateien enthalten, in die der Quellcode eingegeben werden kann.

Im nächsten Schritt wird die IronPDF-Bibliothek zum Projekt hinzugefügt.

3. Installieren Sie die IronPDF-Bibliothek

Die IronPDF Library kann auf vier Arten heruntergeladen und installiert werden:

• Verwendung des NuGet-Paketmanagers von Visual Studio
• Verwendung der Befehlszeile von Visual Studio
• Direktes Herunterladen von der NuGet-Website
• Direktes Herunterladen von der IronPDF-Website

3.1 Verwendung des NuGet-Paketmanagers von Visual Studio

Visual Studio bietet den NuGet Package Manager, um die Installation von Bibliotheken direkt in Projekten zu unterstützen. Der folgende Screenshot zeigt, wie Sie den NuGet Package Manager öffnen.

Zugriff auf den NuGet-Paketmanager von Visual Studio

Verwenden Sie das Suchfeld auf der Registerkarte Durchsuchen, um nach "IronPDF" zu suchen, wie in der folgenden Abbildung gezeigt:

Suchen nach der IronPDF-Bibliothek in der NuGet Package Manager GUI

Das Bild oben zeigt die Liste der verwandten Suchergebnisse. Wählen Sie die erforderlichen Optionen, um das Paket in Ihr Projekt zu installieren.

3.2 Verwendung der Visual Studio-Befehlszeile

Gehen Sie in Visual Studio zu Tools > NuGet Package Manager > Package Manager Console

Geben Sie die folgende Zeile auf der Registerkarte Paketmanager-Konsole ein:

Install-Package IronPdf

Das Paket wird nun heruntergeladen und im aktuellen Projekt installiert.

Installation der IronPDF-Bibliothek über die NuGet-Paketmanager-Konsole

3.3 Direktes Herunterladen von der NuGet-Website

Die dritte Möglichkeit, die IronPDF-Bibliothek zu installieren, besteht darin, das NuGet-Paket direkt von der Website herunterzuladen.

Navigieren Sie zu https://www.nuget.org/packages/IronPdf/

• Klicken Sie im Menü auf der rechten Seite auf die Option "Paket herunterladen".
• Öffnen Sie das heruntergeladene Paket in Ihrem Dateisystem. Sie wird automatisch installiert.
• Laden Sie die Lösung neu und verwenden Sie sie in Ihrem Projekt.

3.4 Direktes Herunterladen von der IronPDF-Website

Klicken Sie auf diesen Link, um das neueste Paket herunterladen direkt von der IronPDF-Website.

Führen Sie nach dem Herunterladen die folgenden Schritte aus, um das Paket zu Ihrem Projekt hinzuzufügen:

• Klicken Sie mit der rechten Maustaste auf das Projekt im Lösungsfenster.
• Wählen Sie die Option "Referenz" und navigieren Sie dann zum Speicherort der Bibliothek, die Sie zuvor heruntergeladen haben.
• Klicken Sie auf OK, um die Bibliothek als Referenz hinzuzufügen.

4. Anzeigen von PDF-Dokumenten mit der Blazor Server App

Die Blazor-Anwendung, die in diesem Tutorial gebaut wird, erstellt ein PDF-Dokument aus der URL einer Webseite und rendert es in den Webbrowser eines Clients.

Mit IronPDF ist das Anzeigen von PDF-Dateien ganz einfach.

Fügen Sie den folgenden Quellcode in die entsprechende .razor-Datei ein.

string _imgUrl = "";
private async Task ViewFile()
{
    var renderer = new IronPdf.ChromePdfRenderer();
    var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");
    _imgUrl = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.Stream.ToArray())}";
}

string _imgUrl = "";
private async Task ViewFile()
{
    var renderer = new IronPdf.ChromePdfRenderer();
    var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");
    _imgUrl = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.Stream.ToArray())}";
}

Private _imgUrl As String = ""
Private Async Function ViewFile() As Task
	Dim renderer = New IronPdf.ChromePdfRenderer()
	Dim pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata")
	_imgUrl = $"data:application/pdf;base64,{Convert.ToBase64String(pdf.Stream.ToArray())}"
End Function

Das obige Codeschnipsel verwendet zunächst IronPDFs renderUrlAsPdf methode, die den HTML-Inhalt von einer bestimmten URL herunterlädt und in ein PDF-Format konvertiert. Anschließend rendert das Codeschnipsel den generierten PDF-Inhalt als eine Zeichenkette aus base64-Rohdaten und speichert sie in einer lokalen Variablen.

Zur Vereinfachung können die Anwendungen die IronPDF speichern als methode (verfügbar auf jedem chromePdfRenderer instanz) um generierte PDF-Dokumente im Dateisystem des Servers zu speichern, um später schnell darauf zugreifen zu können.

Das nächste Codesegment bereitet die Base-64-PDF-Daten für die Ausgabe im Browser des Kunden vor.

@if (_imgUrl != string.Empty)
{
    <iframe src="@_imgUrl" style="width:750px;height:750px;" type="application/pdf"/>
}

@if (_imgUrl != string.Empty)
{
    <iframe src="@_imgUrl" style="width:750px;height:750px;" type="application/pdf"/>
}

'INSTANT VB WARNING: The following constructor is declared outside of its associated class:
'ORIGINAL LINE: if(_imgUrl != string.Empty)
Private Sub New(Optional _imgUrl (Not ByVal) As = String.Empty)
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <iframe src="@_imgUrl" style="width:750px;height:750px;" type="application/pdf"/>
	"width:750px;height:750px;" type="application/pdf"/>
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <iframe src="@_imgUrl" style="width:750px;height:750px;" type
	"@_imgUrl" style="width:750px;height:750px;" type
	<iframe src="@_imgUrl" style
End Sub

Die obige Funktion empfängt die `base64'-Daten von der Blazor-Serverseite und bindet sie an das src-Attribut eines iframe-Elements. Beim Laden der Seite veranlasst dies die Browser, ihre eingebauten Webviewer zu verwenden, um den "Base64"-Inhalt als richtiges PDF-Dokument darzustellen.

Unten sehen Sie einen Screenshot der PDF-Datei, wenn sie aus der `base64'-String gerendert wird.

Ansicht einer in einer Blazor-Anwendung erzeugten PDF-Datei im Browser. Diese PDF-Datei wurde von IronPDF erstellt und als `base64'-String an den Browser gesendet.

Anzeigen eines PDF-Dokuments aus einer HTML-Zeichenkette

Im Folgenden wird gezeigt, wie IronPDF eine PDF-Datei aus einer Reihe von HTML-Tags erstellen kann.

var pdf = new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("<h1>Hello world!!</h1>")

var pdf = new IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("<h1>Hello world!!</h1>")

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'var pdf = New IronPdf.ChromePdfRenderer().RenderHtmlAsPdf("<h1>Hello world!!</h1>")

Das erzeugte PDF-Dokument kann über den Browser des Kunden mit dem im vorherigen Abschnitt beschriebenen Verfahren angezeigt werden.

Schlussfolgerung

In diesem Artikel wurde gezeigt, wie man eine Blazor-Webanwendung entwickelt, die die IronPDF-Bibliothek verwendet, um eine PDF-Datei aus einer Webseite zu generieren und sie im Browser des Benutzers anzuzeigen.

IronPDF ist nicht quelloffen, aber ein kostenloser Testschlüssel können Sie es in der Produktion ohne Wasserzeichen verwenden.