IronPDF 在 Blazor 伺服器應用程式上的使用 (HTML轉PDF教學)
This article was translated from English: Does it need improvement?
TranslatedView the article in English
IronPDF 支援 .NET 6 並包含像 Blazor 這樣的專案類型。 使用 Visual Studio，您可以將 IronPDF 添加到 Blazor Server App 專案中，並按照以下範例進行使用：
如何在Blazor伺服器端應用程式中查看PDF檔案
- 為 Blazor 應用程式安裝 HTML-to-PDF 庫
- 在 Visual Studio 中建立一個新的 Blazor 專案。
- 將網頁透過 URL 轉換為 PDF 文件
- 將網頁渲染到客戶端的網頁瀏覽器中
- 從 HTML 字串查看 PDF 文件
建立一個新的 Blazor 伺服器專案
建立一個新專案並選擇類型為 Blazor 伺服器應用程式
將 IronPDF 安裝到你的 Blazor 專案中
在創建專案後，請按照以下步驟安裝 IronPDF 庫 從 Visual Studio 的 NuGet 中。
在 Visual Studio 的方案總管視窗中，右鍵點擊
References並選擇Manage NuGet Packages。選擇「Browse」並搜索
IronPdf。- 選擇包的最新版本，勾選您的專案，然後點擊安裝。
或者，
Install-Package IronPdf
添加新的 Razor 元件
一旦 IronPDF 安裝在你的 Blazor 專案中，首先添加一個新的 Razor 元件。對於本教程，我們將其命名為 "IronPdfComponent"：
然後，根據以下內容更新代碼：
@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>HTML
@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 IfVB C#
將此 JavaScript 代碼添加到 _layout.cshtml 中，以允許在 Blazor 應用程序中下載由 IronPDF 渲染的 PDF。
<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>HTML
編輯 Shared 資料夾中的 NavMenu.razor 檔案，以包含到我們的新 Razor 元件的導航選項卡。新增以下程式碼：
<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>HTML
一旦應用完所有這些，我們就可以運行解決方案，您應該會看到這個：
