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:
Wie man PDFs in Blazor Server-seitigen Anwendungen anzeigt
- Installieren Sie die HTML-to-PDF-Bibliothek für Blazor-Anwendungen
- Erstellen Sie ein neues Blazor-Projekt in Visual Studio.
- Konvertieren Sie die Webseiten per URL in PDF-Dokumente
- Rendering der Webseiten in den Webbrowser des Kunden
- PDF-Dokumente aus HTML-Strings anzeigen
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.
-
Klicken Sie im Projektmappen-Explorer-Fenster in Visual Studio mit der rechten Maustaste auf "Referenzen" und wählen Sie "NuGet-Pakete verwalten".
-
Wählen Sie Durchsuchen und suchen Sie nach "IronPDF".
-
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";
}
}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:
