Erstellen Sie eine PDF-Datei mit dem Blazor-Tutorial

Erstellen eines neuen Projekts in Visual Studio

Um zu beginnen, öffnen Sie die Microsoft Visual Studio-Anwendung und wählen Sie "Neues Projekt" aus dem Datei-Menü. Dann wählen Sie "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.

Auswahl des Namens und Speicherorts der neuen Blazor-Anwendung

Wählen Sie das gewünschte .NET Framework (wir werden in diesem Tutorial .NET 6.0 verwenden), wie im unteren Screenshot gezeigt:

Erstellen eines neuen Projekts in Visual Studio mit dem .NET 6.0 Framework

Microsoft Visual Studio wird jetzt die Struktur für diese Blazor-Anwendung generieren.

Fügen Sie die IronPDF-Bibliothek zu diesem Projekt hinzu.

3.1 Verwendung des NuGet-Paketmanagers von Visual Studio

Visual Studio bietet den NuGet-Paketmanager, um beim Installieren von Bibliotheken direkt in Projekte zu helfen. Der untenstehende Screenshot zeigt, wie man den NuGet-Paket-Manager öffnet.

Zugriff auf den NuGet-Paketmanager von Visual Studio

Verwenden Sie das Suchfeld unter der Registerkarte "Durchsuchen", um nach "IronPDF" zu suchen, wie im unteren Screenshot gezeigt:

Suche nach der IronPDF-Bibliothek in der NuGet-Paketmanager-GUI

Das Bild oben zeigt die Liste der zugehörigen Suchergebnisse. Wählen Sie die erforderlichen Optionen, um das Paket in Ihrem Projekt zu installieren.

3.2 Verwendung der Visual Studio Befehlszeile

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

Geben Sie die folgende Zeile in die Registerkarte "Package Manager Console" ein:

Install-Package IronPdf

Das Paket wird jetzt im aktuellen Projekt heruntergeladen und installiert.

Die IronPDF-Bibliothek mit der NuGet Package Manager Console installieren

3.3 Direktes Herunterladen von der NuGet-Website

Der dritte Weg, die IronPDF-Bibliothek zu installieren, besteht darin, das NuGet-Paket direkt von der Website herunterzuladen.

Navigieren Sie zur NuGet-Website für IronPDF.

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

3.4 Direktes Herunterladen von der IronPDF-Website

Besuchen Sie die IronPDF-Website, um das IronPDF-Paket direkt herunterzuladen.

Befolgen Sie nach dem Herunterladen diese Schritte, 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 "Hinzufügen" > "Verweis" und navigieren Sie dann zu dem Ort, an dem Sie die Bibliothek zuvor heruntergeladen haben.
• Klicken Sie auf OK, um die Bibliothek als Verweis hinzuzufügen.

4. PDF-Dokumente in der Blazor Server App erstellen

Die Blazor-App in diesem Tutorial wird IronPDF verwenden, um den HTML-Inhalt einer Webseite per URL abzurufen und in ein PDF-Dokument zu konvertieren.

Geben Sie den folgenden Quellcode in die .razor-Datei ein, die im Projekt enthalten ist.

@using IronPdf

@code {
    /// <summary>
    /// This method exports data by converting a URL to a PDF file and initiating its download.
    /// </summary>
    public async Task ExportData()
    {
        try
        {
            string fileName = "Demo.pdf";
            var renderer = new ChromePdfRenderer();

            // Render the contents of the URL as a PDF document
            var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");

            // Save the PDF using a JavaScript function
            await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
        }
        catch (Exception ex)
        {
            // Handle any exceptions that may occur
            Console.Error.WriteLine($"Error in ExportData: {ex.Message}");
        }
    }
}

@using IronPdf

@code {
    /// <summary>
    /// This method exports data by converting a URL to a PDF file and initiating its download.
    /// </summary>
    public async Task ExportData()
    {
        try
        {
            string fileName = "Demo.pdf";
            var renderer = new ChromePdfRenderer();

            // Render the contents of the URL as a PDF document
            var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");

            // Save the PDF using a JavaScript function
            await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
        }
        catch (Exception ex)
        {
            // Handle any exceptions that may occur
            Console.Error.WriteLine($"Error in ExportData: {ex.Message}");
        }
    }
}

[using] ReadOnly Property code() As IronPdf
	''' <summary>
	''' This method exports data by converting a URL to a PDF file and initiating its download.
	''' </summary>
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	public async Task ExportData()
'	{
'		try
'		{
'			string fileName = "Demo.pdf";
'			var renderer = New ChromePdfRenderer();
'
'			' Render the contents of the URL as a PDF document
'			var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");
'
'			' Save the PDF using a JavaScript function
'			await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
'		}
'		catch (Exception ex)
'		{
'			' Handle any exceptions that may occur
'			Console.@Error.WriteLine(string.Format("Error in ExportData: {0}", ex.Message));
'		}
'	}
End Property

Das obige Codebeispiel verwendet zwei Methoden, um PDF-Dokumente aus HTML zu generieren. Die erste ist die RenderUrlAsPdf-Methode von IronPDF, die den HTML-Inhalt von einer angegebenen URL herunterlädt und in ein PDF-Format umwandelt.

Die zweite Methode ist die statische JSRuntime.InvokeVoidAsync-Methode, die eine JavaScript-Funktion im Rahmen der Webseite aufruft, die den PDF-Inhalt als Datei auf dem Dateisystem des Clients speichert.

Diese JavaScript-Funktion ist unten aufgeführt:

<script type="text/javascript">
    /**
     * Saves the PDF data as a file on the client's system.
     * @param {string} filename - The name of the file to be created.
     * @param {string} bytesBase64 - The Base64 encoded string of the PDF data.
     */
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download the document in Microsoft Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
            window.navigator.msSaveOrOpenBlob(blob);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

<script type="text/javascript">
    /**
     * Saves the PDF data as a file on the client's system.
     * @param {string} filename - The name of the file to be created.
     * @param {string} bytesBase64 - The Base64 encoded string of the PDF data.
     */
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download the document in Microsoft Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
            window.navigator.msSaveOrOpenBlob(blob);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

Die obige JavaScript-Funktion empfängt die Base64-Daten von Blazor und wandelt sie in einen Blob um, bevor sie an einem clientseitigen Speicherort gespeichert wird.

Alternativ kann auch die SaveAs-Methode der ChromePdfRenderer-Klasse verwendet werden, um PDF-Dokumente im lokalen Speicher des Browsers zu speichern.