1. IronPDF
2. Anleitungen
3. Blazor Server in PDF umwandeln

IronPDF auf Blazor Server App (HTML zu PDF Tutorial)

Chaknith Bin

25. Januar 2023

Aktualisiert 20. Oktober 2024

Teilen Sie:

IronPDF wird mit .NET 6 unterstützt und enthält Projekttypen wie Blazor. Mit Visual Studio können Sie IronPDF zu Ihrem Blazor Server App Projekt hinzufügen und wie im folgenden Beispiel gezeigt verwenden:

Erstellen Sie ein neues Blazor-Server-Projekt

Erstellen Sie ein neues Projekt und wählen Sie den Typ Blazor Server App.

Installieren Sie IronPDF in Ihrem Blazor-Projekt

Nachdem Sie das Projekt erstellt haben, folgen Sie den nächsten Schritten, um die IronPDF-Bibliothek von NuGet in Visual Studio zu installieren.

1. Im Fenster "Projektmappen-Explorer" in Visual Studio mit der rechten Maustaste auf Verweise klicken und NuGet-Pakete verwalten auswählen.

2. Wählen Sie Durchsuchen und suchen Sie nach IronPdf.

3. Wählen Sie die neueste Version des Pakets aus, aktivieren Sie das Kontrollkästchen für Ihr Projekt, und klicken Sie auf "Installieren".

   Alternativ dazu,

Install-Package IronPdf

Neue Razor-Komponente hinzufügen

Sobald IronPDF in Ihrem Blazor-Projekt installiert ist, beginnen Sie mit dem Hinzufügen einer neuen Razor-Komponente. Für dieses Lernprogramm werden wir es "IronPdfComponent" nennen:

Danach aktualisieren Sie den Code wie folgt:

@page "/IronPdf" @inject IJSRuntime JS
<h3>IronPdfComponent</h3>
<EditForm Model="@_InputMsgModel" id="inputText">
    <div>
        <InputTextArea @bind-Value="@_InputMsgModel.HTML" rows="20" />
    </div>
    <div>
        <button onclick="@SubmitHTML">Render HTML</button>
    </div>
</EditForm>

@page "/IronPdf" @inject IJSRuntime JS
<h3>IronPdfComponent</h3>
<EditForm Model="@_InputMsgModel" id="inputText">
    <div>
        <InputTextArea @bind-Value="@_InputMsgModel.HTML" rows="20" />
    </div>
    <div>
        <button onclick="@SubmitHTML">Render HTML</button>
    </div>
</EditForm>

@code {

    InputHTMLModel _InputMsgModel = new InputHTMLModel();

    private async Task SubmitHTML()
    {
        IronPdf.License.LicenseKey = "IRONPDF-MYLICENSE-KEY-1EF01";
        var render = new IronPdf.ChromePdfRenderer();
        var doc = render.RenderHtmlAsPdf(_InputMsgModel.HTML);
        var fileName = "iron.pdf";
        using var streamRef = new DotNetStreamReference(stream: doc.Stream);
        await JS.InvokeVoidAsync("SubmitHTML", fileName, streamRef);
    }

    public class InputHTMLModel
    {
        public string HTML { get; set; } = "My new message";
    }
}

@code {

    InputHTMLModel _InputMsgModel = new InputHTMLModel();

    private async Task SubmitHTML()
    {
        IronPdf.License.LicenseKey = "IRONPDF-MYLICENSE-KEY-1EF01";
        var render = new IronPdf.ChromePdfRenderer();
        var doc = render.RenderHtmlAsPdf(_InputMsgModel.HTML);
        var fileName = "iron.pdf";
        using var streamRef = new DotNetStreamReference(stream: doc.Stream);
        await JS.InvokeVoidAsync("SubmitHTML", fileName, streamRef);
    }

    public class InputHTMLModel
    {
        public string HTML { get; set; } = "My new message";
    }
}

code
If True Then

	Dim _InputMsgModel As New InputHTMLModel()

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	private async Task SubmitHTML()
'	{
'		IronPdf.License.LicenseKey = "IRONPDF-MYLICENSE-KEY-1EF01";
'		var render = New IronPdf.ChromePdfRenderer();
'		var doc = render.RenderHtmlAsPdf(_InputMsgModel.HTML);
'		var fileName = "iron.pdf";
'		var streamRef = New DotNetStreamReference(stream: doc.Stream);
'		await JS.InvokeVoidAsync("SubmitHTML", fileName, streamRef);
'	}

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	public class InputHTMLModel
'	{
'		public string HTML
'		{
'			get;
'			set;
'		} = "My new message";
'	}
End If

Fügen Sie diesen JavaScript-Code zu _layout.cshtml hinzu, um das Herunterladen des von IronPDF im Blazor-Anwendung gerenderten PDFs zu ermöglichen:

<script>
    window.SubmitHTML = 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.SubmitHTML = 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>

Bearbeiten Sie die Datei NavMenu.razor im Ordner Shared, um eine Navigationsregisterkarte in unsere neue Razor-Komponente aufzunehmen. Fügen Sie den folgenden Code hinzu:

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronPdf">
        <span class="oi oi-list-rich" aria-hidden="true"></span> IronPdf
    </NavLink>
</div>

<div class="nav-item px-3">
    <NavLink class="nav-link" href="IronPdf">
        <span class="oi oi-list-rich" aria-hidden="true"></span> IronPdf
    </NavLink>
</div>

Sobald dies alles umgesetzt ist, können wir unsere Lösung ausführen, und Sie sollten folgendes sehen:

Chaknith Bin

  Jetzt mit dem Ingenieurteam chatten

Software-Ingenieur

Chaknith arbeitet an IronXL und IronBarcode. Er hat tiefgehende Expertise in C# und .NET und hilft, die Software zu verbessern und Kunden zu unterstützen. Seine Erkenntnisse aus Benutzerinteraktionen tragen zu besseren Produkten, Dokumentation und einem insgesamt besseren Erlebnis bei.