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 並與之交互。如有任何歧義，請隨時在論壇上與我們聯繫。