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

IronPDF auf Blazor Server App (HTML zu PDF Tutorial)

IronPDF wird von .NET 6 und den darin enthaltenen Projekttypen wie Blazor unterstützt. 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 dieIronPDF-Bibliothek von NuGet innerhalb von Visual Studio.

1. Klicken Sie im Projektmappen-Explorer-Fenster in Visual Studio mit der rechten Maustaste auf "Referenzen" und wählen Sie "NuGet-Pakete verwalten".
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 Tutorial 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";
    }
}

IRON VB CONVERTER ERROR developers@ironsoftware.com

Fügen Sie diesen JavaScript-Code in _layout.cshtml ein, um das Herunterladen der von IronPDF gerenderten PDF-Datei in der Blazor-Anwendung 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 angewendet wurde, können wir unsere Lösung ausführen und Sie sollten folgendes sehen: