JavaScript如何向Excel追加数据

有志者，事竟成！如果你在学习文章，那么本文《JavaScript 如何追加表格到 Excel 文件》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

本文介绍了如何使用 JavaScript 和 SheetJS 社区版库，将 HTML 表格数据追加到现有的 Excel 文件中，并在每次运行时创建一个新的工作表。该方案通过读取 HTML 表格数据、下载原始 Excel 文件、将新工作表追加到原始文件，并启动新文件的下载来实现。

方案概述

本教程将引导你完成使用 JavaScript 将 HTML 表格数据追加到现有 Excel 文件的过程。我们将使用 SheetJS 库来实现此目的。SheetJS 是一个强大的 JavaScript 库，用于读取和写入各种电子表格格式。

准备工作

在开始之前，请确保你已具备以下条件：

• 一个包含 HTML 表格的网页。
• 一个现有的 Excel 文件。
• 在你的项目中引入 SheetJS 库。 你可以通过以下 CDN 链接引入：

实现步骤

以下是将 HTML 表格追加到现有 Excel 文件的步骤：

1. 获取 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。

2. 获取工作表：

   从工作簿对象中获取要追加的工作表。通常，HTML 表格转换后的工作簿会包含一个名为 "Sheet1" 的工作表。

   const newSheet = data_to_append.Sheets["Sheet1"];

3. 下载原始 Excel 文件：

   使用 fetch API 下载原始 Excel 文件。你需要提供 Excel 文件的 URL。

   const url = "https://www.lucasroquilly.com/stack_overflow_samples/workbook.xls";
   const data = await (await fetch(url)).arrayBuffer();

4. 创建工作簿：

   使用 XLSX.read() 方法从原始 Excel 文件数据创建 SheetJS 工作簿对象。

   const workbook = XLSX.read(data);

5. 追加工作表：

   使用 XLSX.utils.book_append_sheet() 方法将新的工作表追加到原始工作簿。你需要提供工作簿对象、要追加的工作表和新工作表的名称。

   XLSX.utils.book_append_sheet(workbook, newSheet, "Appended Sheet", true);

6. 启动下载：

   使用 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如何向Excel追加数据》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！