HTML 网页可以在手持设备上可用的任何浏览器中查看。在 HTML 页面上显示 Excel 数据有助于向相关利益相关者展示数据，而无需与他们共享实际的 Excel 电子表格。因此，他们可以轻松地在任何浏览器中查看所需的信息/数据。在本文中，我们将学习如何在 Node.js 中使用 REST API 以 HTML 格式显示 Excel 数据。
本文应涵盖以下主题：
- Excel 到 HTML 查看器 REST API 和 Node.js SDK
- 在 Node.js 中使用 REST API 以 HTML 格式显示 Excel 数据
- 在 Node.js 中显示带有水印的 HTML 格式的 Excel 数据
Excel 到 HTML 查看器 REST API 和 Node.js SDK
为了呈现 XLS 或 XLSX 电子表格，我将使用 GroupDocs.Viewer Cloud 的 Node.js SDK API。它允许以编程方式呈现和查看各种流行的文档和图像文件格式。请在控制台中使用以下命令安装它：
npm install groupdocs-conversion-cloud
在执行上述步骤之前，请从仪表板获取您的客户端 ID 和密码。获得 ID 和密码后，添加如下所示的代码：
// 请从仪表板获取您的客户端 ID 和密码，并添加如下所示的代码：
global.clientId = "112f0f38-9dae-42d5-b4fc-cc84ae644972";
global.clientSecret = "16ad3fe0bdc39c910f57d2fd48a5d618";
global.myStorage = "";
const configuration = new groupdocs_viewer_cloud.Configuration(clientId, clientSecret);
configuration.apiBaseUrl = "https://api.groupdocs.cloud";
在 Node.js 中使用 REST API 以 HTML 格式显示 Excel 数据
我们可以按照下面给出的简单步骤在 HTML 中显示 Excel 数据：
- 上传XLSX文件到云端
- 使用 Node.js 在 HTML 中显示 Excel 数据
- 下载渲染文件
上传文件
首先，我们将使用下面给出的代码示例将 XLSX 文件上传到云端：
// 此代码示例演示如何将 XLSX 文件上传到云端
// 构造FileApi
let fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
let resourcesFolder = 'C:\\Files\\viewer\\sample.xlsx';
// 一个一个读取文件
fs.readFile(resourcesFolder, (err, fileStream) => {
// 创建上传文件请求
let request = new groupdocs_viewer_cloud.UploadFileRequest("sample.xlsx", fileStream, myStorage);
// 上传文件
fileApi.uploadFile(request);
});
因此，上传的文件将在云端仪表板的 文件部分 中可用。
使用 Node.js 在 HTML 中显示 Excel 数据
我们可以按照下面给出的步骤以编程方式在 HTML 页面上呈现或显示 Excel 数据：
- 首先，创建 ViewApi 的实例。
- 接下来，创建 FileInfo 的一个实例。
- 然后，设置输入文件路径。
- 接下来，创建 ViewOptions 的一个实例。
- 然后，分配 FileInfo 并将“HTML”设置为 viewFormat。
- 接下来，创建 HtmlOptions 的一个实例。
- 然后，启动并分配 SpreadsheetOptions。
- 接下来，设置各种选项，如 paginateSheets、textOverflowMode、renderGridLines 等。
- 之后，通过将 viewOptions 作为参数调用 CreateViewRequest 方法来创建视图请求。
- 最后，以 CreateViewRequest 作为参数调用 ViewApi.createView 方法来呈现 HTML。
以下代码示例展示了如何在 Node.js 中使用 REST API 以 HTML 格式显示 Excel 数据。
// 此代码示例演示如何在 HTML 页面中呈现 Excel
// 接口初始化
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);
// 输入文件
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";
// 定义视图选项
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;
// 定义渲染选项
viewOptions.renderOptions = new groupdocs_viewer_cloud.HtmlOptions();
// 定义电子表格呈现选项
viewOptions.renderOptions.spreadsheetOptions = new groupdocs_viewer_cloud.SpreadsheetOptions();
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = false;
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = groupdocs_viewer_cloud.SpreadsheetOptions.TextOverflowModeEnum.HideText;
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;
// 创建查看请求
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// 创建视图
let response = await viewApi.createView(request);
// 显示呈现的 HTML 页面路径
for (let page = 0; page < response.pages.length; page++) {
console.log("Document rendered: " + response.pages[page].path);
}
使用 Node.js 在 HTML 中显示 Excel 数据
默认情况下，一个工作表呈现在一页中。我们可以通过应用以下选项来自定义 Excel 的呈现：
- 将 Excel 工作表显示为多个页面
viewOptions.renderOptions.spreadsheetOptions.paginateSheets = true;
viewOptions.renderOptions.spreadsheetOptions.countRowsPerPage = 45;
- 在 HTML 中显示网格线
viewOptions.renderOptions.spreadsheetOptions.renderGridLines = true;
- 呈现空行和列
viewOptions.renderOptions.spreadsheetOptions.renderEmptyRows = true;
viewOptions.renderOptions.spreadsheetOptions.renderEmptyColumns = true;
- 显示隐藏的行和列
viewOptions.renderOptions.spreadsheetOptions.renderHiddenColumns = true;
viewOptions.renderOptions.spreadsheetOptions.renderHiddenRows = true;
- 仅渲染打印区域
viewOptions.renderOptions.spreadsheetOptions.renderPrintAreaOnly = true;
- 设置文字溢出模式
viewOptions.renderOptions.spreadsheetOptions.textOverflowMode = "HideText";
下载 HTML 页面
上面的代码示例会将呈现的 HTML 页面保存在云端。可以使用以下代码示例下载它：
// 此代码示例演示了如何从云端下载 HTML 页面
// 初始化接口
var fileApi = groupdocs_viewer_cloud.FileApi.fromConfig(configuration);
// 创建文件下载请求
let request = new groupdocs_viewer_cloud.DownloadFileRequest("/viewer/sample_xlsx/sample_page_1.html", myStorage);
// 下载文件
let response = await fileApi.downloadFile(request);
// 将图像文件保存在工作目录中
fs.writeFile("C:\\Files\\viewer\\sample_xlsx\\sample_page_1.html", response, "binary", function (err) { });
使用 Node.js 在带有水印的 HTML 中显示 Excel 数据
我们可以按照以下步骤以编程方式在将 Excel 数据呈现到 HTML 页面时添加水印文本：
- 首先，创建 ViewApi 的实例。
- 接下来，创建 FileInfo 的一个实例。
- 然后，设置输入文件路径。
- 接下来，创建 ViewOptions 的一个实例。
- 然后，分配 FileInfo 并将“HTML”设置为 viewFormat。
- 接下来，创建并分配水印实例。
- 然后，设置水印大小和文字。
- 之后，通过将 viewOptions 作为参数调用 CreateViewRequest 方法来创建视图请求。
- 最后，以 CreateViewRequest 作为参数调用 ViewApi.createView 方法来呈现 HTML。
以下代码示例展示了如何在 Node.js 中使用 REST API 以带水印的 HTML 格式显示 Excel 数据。
// 此代码示例演示如何在带有水印的 HTML 页面中呈现 Excel
// 接口初始化
let viewApi = groupdocs_viewer_cloud.ViewApi.fromKeys(clientId, clientSecret);
// 输入文件
let fileInfo = new groupdocs_viewer_cloud.FileInfo();
fileInfo.filePath = "sample.xlsx";
// 定义视图选项
let viewOptions = new groupdocs_viewer_cloud.ViewOptions();
viewOptions.fileInfo = fileInfo;
viewOptions.viewFormat = groupdocs_viewer_cloud.ViewOptions.ViewFormatEnum.HTML;
// 加水印
viewOptions.watermark = new groupdocs_viewer_cloud.Watermark();
viewOptions.watermark.size = 100;
viewOptions.watermark.text = "This is a sample watermark!";
// 创建查看请求
let request = new groupdocs_viewer_cloud.CreateViewRequest(viewOptions);
// 创建视图
let response = await viewApi.createView(request);
// 显示呈现的 HTML 页面路径
for (let page = 0; page < response.pages.length; page++) {
console.log("Document rendered: " + response.pages[page].path);
}
使用 Node.js 在带有水印的 HTML 中显示 Excel 数据
在线试用
请试用以下使用上述API开发的免费在线Excel渲染工具。 https://products.groupdocs.app/viewer/xlsx
结论
在本文中，我们学习了如何在云端将 Excel 数据显示为 HTML。我们还了解了如何使用 Node.js 将水印添加到呈现的 HTML 页面。本文还介绍了如何以编程方式将 XLSX 文件上传到云端，然后从云端下载呈现的 HTML 文件。此外，您可以使用 文档 了解有关 GroupDocs.Viewer Cloud API 的更多信息。我们还提供了一个 API 参考 部分，让您可以直接通过浏览器可视化我们的 API 并与之交互。如有任何歧义，请随时在论坛上与我们联系。