本文介绍如何使用 JavaScript 将 HTML 表格数据追加到现有的 Excel 文件中，并在每次运行时创建一个新的工作表。我们将使用 SheetJS Community Edition 库来实现这个功能，该库允许我们读取、修改和写入 Excel 文件。通过本文，你将学习如何从 HTML 表格提取数据，读取现有的 Excel 文件，将数据作为新的工作表追加到文件中，并最终下载更新后的 Excel 文件。
使用 SheetJS 将 HTML 表格追加到 Excel 文件
在 Web 开发中，经常需要将数据导出到 Excel 文件。如果需要将动态生成的 HTML 表格数据追加到现有的 Excel 文件，并为每次操作创建一个新的工作表，则需要一些额外的步骤。以下是如何使用 SheetJS 库来实现此目标的详细教程。
准备工作
- 引入 SheetJS 库: 首先，需要在 HTML 文件中引入 SheetJS 库。可以使用 CDN 链接：
- HTML 表格: 确保已经存在一个包含数据的 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 |
实现步骤
以下是 JavaScript 代码，用于从 HTML 表格中提取数据，读取现有 Excel 文件，将数据作为新工作表追加到文件中，并下载更新后的文件：
(async () => {
// 1. 从 HTML 表格获取数据
var data_to_append = XLSX.utils.table_to_book(
document.getElementById("test_table")
);
// 2. 获取要追加的工作表 "Sheet1"
const newSheet = data_to_append.Sheets["Sheet1"];
// 3. 获取原始 Excel 文件
const url =
"https://www.lucasroquilly.com/stack_overflow_samples/workbook.xls"; // 替换为你的 Excel 文件 URL
const data = await (await fetch(url)).arrayBuffer();
// 4. 从原始 Excel 文件数据创建工作簿
const workbook = XLSX.read(data);
// 5. 将工作表追加到工作簿，命名为 "Appended Sheet"
XLSX.utils.book_append_sheet(workbook, newSheet, "Appended Sheet", true);
// 6. 尝试启动文件下载
XLSX.writeFile(workbook, "workbook.xls");
})();代码解释:
立即学习“Java免费学习笔记（深入）”；
- XLSX.utils.table_to_book(document.getElementById("test_table")): 此函数将 HTML 表格转换为 SheetJS 工作簿对象。
- data_to_append.Sheets["Sheet1"]: 获取从 HTML 表格转换来的工作簿中的名为 "Sheet1" 的工作表。
- fetch(url): 使用 fetch API 获取现有 Excel 文件的数据。需要替换 url 为你的 Excel 文件 URL。
- XLSX.read(data): 使用 SheetJS 读取现有 Excel 文件的数据，并将其转换为工作簿对象。
- XLSX.utils.book_append_sheet(workbook, newSheet, "Appended Sheet", true): 将新的工作表追加到现有工作簿，并将其命名为 "Appended Sheet"。
- XLSX.writeFile(workbook, 'workbook.xls'): 使用 SheetJS 创建一个新文件，并启动下载。
注意事项
- 跨域问题: 如果 Excel 文件位于不同的域中，可能会遇到跨域问题。确保服务器已配置 CORS 策略，允许从你的域访问文件。
- 文件 URL: 请确保 url 变量指向有效的 Excel 文件。
- SheetJS 版本: 此代码使用 SheetJS Community Edition 0.18.8 版本。不同版本可能存在差异，请参考 SheetJS 官方文档。
- 错误处理: 在实际应用中，应添加错误处理机制，例如使用 try...catch 块来处理可能发生的异常。
- 文件名: XLSX.writeFile 函数中的文件名 'workbook.xls' 可以根据需要更改。
示例 CSS 样式
以下是一些可选的 CSS 样式，用于美化 HTML 表格：
.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;
}总结
通过使用 SheetJS 库，可以方便地将 HTML 表格数据追加到现有的 Excel 文件中，并为每次操作创建一个新的工作表。只需几个简单的步骤，即可实现此功能。请确保正确引入 SheetJS 库，并根据实际情况调整代码中的 URL 和文件名。此外，请注意跨域问题和错误处理，以确保代码的稳定性和可靠性。
希望本教程对您有所帮助！
