本文介绍了如何使用 JavaScript 和 SheetJS 社区版库，将 HTML 表格数据追加到现有的 Excel 文件中，并在每次运行时创建一个新的工作表。该方案通过读取 HTML 表格数据、下载原始 Excel 文件、将新工作表追加到原始文件，并启动新文件的下载来实现。
方案概述
本教程将引导你完成使用 JavaScript 将 HTML 表格数据追加到现有 Excel 文件的过程。我们将使用 SheetJS 库来实现此目的。SheetJS 是一个强大的 JavaScript 库，用于读取和写入各种电子表格格式。
准备工作
在开始之前，请确保你已具备以下条件：
- 一个包含 HTML 表格的网页。
- 一个现有的 Excel 文件。
- 在你的项目中引入 SheetJS 库。 你可以通过以下 CDN 链接引入：
实现步骤
以下是将 HTML 表格追加到现有 Excel 文件的步骤：
立即学习“Java免费学习笔记（深入）”；
-
获取 HTML 表格数据：
首先，我们需要从 HTML 表格中提取数据。我们可以使用 XLSX.utils.table_to_book() 方法将 HTML 表格转换为 SheetJS 工作簿对象。
var data_to_append = XLSX.utils.table_to_book(document.getElementById("test_table"));其中，test_table 是你的 HTML 表格的 ID。
-
获取工作表：
从工作簿对象中获取要追加的工作表。通常，HTML 表格转换后的工作簿会包含一个名为 "Sheet1" 的工作表。
const newSheet = data_to_append.Sheets["Sheet1"];
-
下载原始 Excel 文件：
使用 fetch API 下载原始 Excel 文件。你需要提供 Excel 文件的 URL。
const url = "https://www.lucasroquilly.com/stack_overflow_samples/workbook.xls"; const data = await (await fetch(url)).arrayBuffer();
-
创建工作簿：
使用 XLSX.read() 方法从原始 Excel 文件数据创建 SheetJS 工作簿对象。
const workbook = XLSX.read(data);
-
追加工作表：
使用 XLSX.utils.book_append_sheet() 方法将新的工作表追加到原始工作簿。你需要提供工作簿对象、要追加的工作表和新工作表的名称。
XLSX.utils.book_append_sheet(workbook, newSheet, "Appended Sheet", true);
-
启动下载：
使用 XLSX.writeFile() 方法启动新 Excel 文件的下载。你需要提供工作簿对象和文件名。
XLSX.writeFile(workbook, 'workbook.xls');
完整代码示例
(async() => {
// GET DATA TO APPEND FROM HTML TABLE
var data_to_append = XLSX.utils.table_to_book(document.getElementById("test_table"));
// GET SHEET "Sheet1" FROM DATA TO APPEND
const newSheet = data_to_append.Sheets["Sheet1"];
// GET ORIGINAL XLS FILE
const url = "https://www.lucasroquilly.com/stack_overflow_samples/workbook.xls";
const data = await (await fetch(url)).arrayBuffer();
/* CREATE WORKBOOK FROM ORIGINAL XLS FILE DATA */
const workbook = XLSX.read(data);
// APPEND SHEET TO WORKBOOK UNDER NAME "Appended Sheet"
XLSX.utils.book_append_sheet(workbook, newSheet, "Appended Sheet", true);
//ATTEMPT TO LAUNCH DOWNLOAD OF FILE
XLSX.writeFile(workbook, 'workbook.xls');
})();HTML 表格示例
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 |
|---|---|---|---|---|
| NEW Row:1 Cell:1 | NEW Row:1 Cell:2 | NEW Row:1 Cell:3 | NEW Row:1 Cell:4 | Row:1 Cell:5 |
| NEW Row:2 Cell:1 | NEW Row:2 Cell:2 | NEW Row:2 Cell:3 | NEW Row:2 Cell:4 | NEW Row:2 Cell:5 |
CSS 样式示例
.tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;}
.tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}
.tftable tr {background-color:#d4e3e5;}
.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}
.tftable tr:hover {background-color:#ffffff;}注意事项
- 此代码需要在支持 fetch API 的环境中运行。
- 由于安全限制，某些浏览器可能不允许直接下载文件。你可能需要在服务器端处理文件下载。
- 确保提供的 Excel 文件 URL 是正确的，并且可以访问。
- SheetJS 社区版在处理大型 Excel 文件时可能会遇到性能问题。如果需要处理大型文件，请考虑使用 SheetJS 专业版。
总结
本教程介绍了如何使用 JavaScript 和 SheetJS 库将 HTML 表格数据追加到现有 Excel 文件。通过这些步骤，你可以轻松地将网页上的数据导出到 Excel 文件中，并实现数据的动态更新和管理。 通过修改代码，你可以轻松地适应不同的场景和需求。例如，你可以根据需要自定义工作表的名称，或者将数据追加到特定的工作表中。
