IronPDF在Blazor服务器应用程序中（HTML至PDF教程）

Translated

View 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项目中

在您创建项目后，请按照以下步骤进行安装来自 NuGet 的 IronPDF 库在 Visual Studio.

在 Visual Studio 的解决方案资源管理器窗口中，右键单击“引用”并选择“管理 NuGet 包”。
选择“浏览”并搜索 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 If

VB 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

完成所有这些工作后，我们就可以运行我们的解决方案了，您应该会看到以下结果：