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

IronPDF auf Blazor Server App (HTML zu PDF Tutorial)

IronPDF wird mit .NET 6 unterstützt und umfasst 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 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 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 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 umgesetzt ist, können wir unsere Lösung ausführen, und Sie sollten folgendes sehen: