使用Blazor教程创建PDF文件

在 Visual Studio 中创建一个新项目

首先，打开 Microsoft Visual Studio 应用程序，并从文件菜单中选择“新建项目”。 然后，选择“Blazor 服务器应用”。

在 Visual Studio 中创建新项目

输入项目名称并选择文件路径。 然后，点击创建按钮。

选择新 Blazor 应用程序的名称和位置

选择所需的 .NET 框架（本教程中我们将使用 .NET 6.0），如下图所示：

使用 .NET 6.0 框架在 Visual Studio 中创建一个新项目

Microsoft Visual Studio 现在将生成这个 Blazor 应用程序的结构。

接下来，将 IronPDF 库添加到这个新项目中。

3.1 使用 Visual Studio 的 NuGet 包管理器

Visual Studio 提供 NuGet 包管理器，以帮助直接将库安装到项目中。 下图显示如何打开NuGet包管理器。

访问 Visual Studio 的 NuGet 包管理器

在“浏览”标签下使用搜索字段搜索“IronPDF”，如下图所示：

在 NuGet 包管理器 GUI 中搜索 IronPDF 库

上图展示了相关搜索结果列表。 选择所需的选项，将包安装到项目中。

3.2 使用 Visual Studio 命令行

在 Visual Studio 中，进入工具 > NuGet 包管理器 > 包管理器控制台

在包管理器控制台选项卡中输入以下行：

Install-Package IronPdf

现在，该包将被下载并安装到当前项目中。

使用 NuGet 包管理器控制台安装 IronPDF 库

3.3 直接从 NuGet 网站下载

安装 IronPDF 库的第三种方式是直接从网站下载 NuGet 包。

导航到IronPDF 的 NuGet 网站。

• 点击右侧菜单中的“下载包”选项。
• 在文件系统上打开下载的包。 它将自动安装。
• 重新加载解决方案并开始在项目中使用。

3.4 直接从 IronPDF 网站下载

访问 IronPDF 网站，直接下载 IronPDF 包。

下载后，按以下步骤将包添加到项目中：

• 从解决方案窗口中右键点击项目。
• 选择“添加”>“引用”选项，然后导航到之前下载的库所在位置。
• 点击 OK 将库添加为引用。

4. 在 Blazor 服务器应用中创建 PDF 文档

本教程中的 Blazor 应用程序将使用 IronPDF 根据网页的 URL 获取 HTML 内容并将其转换为 PDF 文档。

在项目中包含的 .razor 文件中输入以下源代码。

@using IronPdf

@code {
    /// <summary>
    /// This method exports data by converting a URL to a PDF file and initiating its download.
    /// </summary>
    public async Task ExportData()
    {
        try
        {
            string fileName = "Demo.pdf";
            var renderer = new ChromePdfRenderer();

            // Render the contents of the URL as a PDF document
            var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");

            // Save the PDF using a JavaScript function
            await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
        }
        catch (Exception ex)
        {
            // Handle any exceptions that may occur
            Console.Error.WriteLine($"Error in ExportData: {ex.Message}");
        }
    }
}

@using IronPdf

@code {
    /// <summary>
    /// This method exports data by converting a URL to a PDF file and initiating its download.
    /// </summary>
    public async Task ExportData()
    {
        try
        {
            string fileName = "Demo.pdf";
            var renderer = new ChromePdfRenderer();

            // Render the contents of the URL as a PDF document
            var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");

            // Save the PDF using a JavaScript function
            await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
        }
        catch (Exception ex)
        {
            // Handle any exceptions that may occur
            Console.Error.WriteLine($"Error in ExportData: {ex.Message}");
        }
    }
}

[using] ReadOnly Property code() As IronPdf
	''' <summary>
	''' This method exports data by converting a URL to a PDF file and initiating its download.
	''' </summary>
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	public async Task ExportData()
'	{
'		try
'		{
'			string fileName = "Demo.pdf";
'			var renderer = New ChromePdfRenderer();
'
'			' Render the contents of the URL as a PDF document
'			var pdf = renderer.RenderUrlAsPdf("https://localhost:7018/fetchdata");
'
'			' Save the PDF using a JavaScript function
'			await JSRuntime.InvokeVoidAsync("saveAsFile", fileName, Convert.ToBase64String(pdf.Stream.ToArray()));
'		}
'		catch (Exception ex)
'		{
'			' Handle any exceptions that may occur
'			Console.@Error.WriteLine(string.Format("Error in ExportData: {0}", ex.Message));
'		}
'	}
End Property

上面的代码片段使用两种方法生成 HTML 到 PDF 的文档。 第一种是 IronPDF 的RenderUrlAsPdf 方法，它从给定的 URL 下载 HTML 内容并将其转换为 PDF 格式。

第二种方法是静态JSRuntime.InvokeVoidAsync 方法，它触发浏览器的 JavaScript 引擎以在网页的范围内调用一个 JavaScript 函数，该函数将 PDF 内容保存到客户端文件系统中的文件。

下面包含此 JavaScript 函数：

<script type="text/javascript">
    /**
     * Saves the PDF data as a file on the client's system.
     * @param {string} filename - The name of the file to be created.
     * @param {string} bytesBase64 - The Base64 encoded string of the PDF data.
     */
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download the document in Microsoft Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
            window.navigator.msSaveOrOpenBlob(blob);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

<script type="text/javascript">
    /**
     * Saves the PDF data as a file on the client's system.
     * @param {string} filename - The name of the file to be created.
     * @param {string} bytesBase64 - The Base64 encoded string of the PDF data.
     */
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download the document in Microsoft Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
            window.navigator.msSaveOrOpenBlob(blob);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

上面的 JavaScript 函数接收来自 Blazor 的 Base64 数据，并将其转换为 blob，然后将其保存到客户端位置。

Alternatively, The SaveAs method from the ChromePdfRenderer class can also be used to save PDF documents to the browser's local storage.