Blazor 服务器应用程序上的 IronPDF (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 转 PDF 库
- 在 Visual Studio 中创建一个新的 Blazor 项目。
- 通过 URL 将网页转换为 PDF 文档
- 将网页渲染到客户的网络浏览器中
- 从 HTML 字符串查看 PDF 文档
创建一个新的 Blazor 服务器项目
创建新项目并选择 blazor 服务器应用程序类型
将 IronPDF 安装到 Blazor 项目中
创建项目后，按照以下步骤安装 IronPDF 库 从 Visual Studio 中的 NuGet 获取。
在 Visual Studio 的 "解决方案资源管理器 "窗口中，右键单击 "引用"，然后选择 "管理 NuGet 包"。
选择 "浏览 "并搜索 "IronPdf"。
- 选择最新版本的软件包，勾选项目复选框，然后点击安装。
或者
Install-Package IronPdf
添加新的 Razor 组件
在Blazor项目中安装IronPDF后，首先添加一个新的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
编辑共享文件夹中的 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
全部应用完毕后，我们就可以运行我们的解决方案了，你应该会看到下面的内容：
