IronPDF在Blazor服务器应用程序中(HTML至PDF教程)

This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDF 支持 .NET 6 和包括项目类型如 Blazor。 使用 Visual Studio,您可以将 IronPDF 添加到您的 Blazor Server App 项目中,并按照以下示例所示使用它:

创建一个新的 Blazor 服务器项目

创建一个新项目并选择 Blazor 服务器应用程序类型

Blazor 创建项目图像

将IronPDF安装到您的Blazor项目中

在您创建项目后,请按照以下步骤进行安装IronPDF 库从 Visual Studio 中的 NuGet 获取。

  1. 在 Visual Studio 的解决方案资源管理器窗口中,右键单击“引用”并选择“管理 NuGet 包”。
  2. 选择“浏览”并搜索 IronPdf
  3. 选择该软件包的最新版本,勾选您的项目复选框,然后点击安装。

    或者,

Install-Package IronPdf

添加新的Razor组件

安装IronPDF到您的Blazor项目后,首先添加一个新的Razor组件。 在本教程中,我们将其命名为“IronPdfComponent”:

Blazor IronPDF 组件图像

然后,更新代码如下:

@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";
    }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
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

全部应用完毕后,我们就可以运行我们的解决方案了,你应该会看到下面的内容:

Blazor IronPDF 运行页面图片