本文介绍了如何使用 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 文件中，并实现数据的动态更新和管理。 通过修改代码，你可以轻松地适应不同的场景和需求。例如，你可以根据需要自定义工作表的名称，或者将数据追加到特定的工作表中。
以上就是使用 JavaScript 将 HTML 表格追加到现有 Excel 文件的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1572460.html
微信扫一扫 
支付宝扫一扫 
