JavaScript添加表格到Excel教程

想知道如何使用 JavaScript 将 HTML 表格添加到 Excel 文件吗？本文将为你提供一份详细的教程，教你如何使用 SheetJS Community Edition 库，轻松实现将 HTML 表格数据追加到现有 Excel 文件，并在每次运行时创建新的工作表。我们将深入讲解 SheetJS 库的引入、HTML 表格的准备，以及如何通过代码示例一步步实现表格数据的读取、转换、追加和下载。同时，本文还着重强调了跨域问题、文件大小优化和错误处理等关键注意事项，助你打造稳定高效的 Excel 文件处理功能。无论你是前端开发新手还是经验丰富的工程师，都能从中受益匪浅，快速掌握 JavaScript 操作 Excel 文件的技巧。

本文档介绍如何使用 JavaScript 将 HTML 表格数据追加到现有的 Excel 文件中，并在每次运行时创建一个新的工作表。我们将使用 SheetJS Community Edition 库来实现这一目标，该库允许我们读取、修改和写入 Excel 文件。本文将提供详细的代码示例和步骤，帮助你轻松完成此任务。

使用 SheetJS 将 HTML 表格追加到 Excel 文件

本教程将引导你完成将 HTML 表格数据追加到现有 Excel 文件的过程。 我们将使用 SheetJS（也称为 js-xlsx）库，这是一个流行的 JavaScript 库，用于处理 Excel 文件。

准备工作

1. 引入 SheetJS 库： 首先，需要在 HTML 文件中引入 SheetJS 库。 可以通过 CDN 引入，也可以下载库文件并在本地引入。

   <script src="https://cdn.sheetjs.com/xlsx-0.18.8/package/dist/xlsx.full.min.js"></script>

2. HTML 表格： 确保你的 HTML 页面中包含要导出的表格，并为其指定一个唯一的 ID。

   <table id="myTable" class="tftable" border="1">
     <tr>
       <th>Header 1</th>
       <th>Header 2</th>
       <th>Header 3</th>
     </tr>
     <tr>
       <td>Row 1, Cell 1</td>
       <td>Row 1, Cell 2</td>
       <td>Row 1, Cell 3</td>
     </tr>
     <tr>
       <td>Row 2, Cell 1</td>
       <td>Row 2, Cell 2</td>
       <td>Row 2, Cell 3</td>
     </tr>
   </table>

   .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;}

实现步骤

1. 获取 HTML 表格数据： 使用 XLSX.utils.table_to_book() 方法将 HTML 表格转换为 SheetJS 可以处理的格式。

   var table = document.getElementById('myTable');
   var wb = XLSX.utils.table_to_book(table);

2. 读取现有的 Excel 文件： 使用 fetch API 获取现有 Excel 文件的 ArrayBuffer 数据。 然后使用 XLSX.read() 方法读取该数据，创建一个工作簿对象。

   const url = "https://www.lucasroquilly.com/stack_overflow_samples/workbook.xls"; // 替换为你的 Excel 文件 URL
   const data = await (await fetch(url)).arrayBuffer();
   const workbook = XLSX.read(data);

3. 创建新的工作表： 从转换后的表格数据中提取工作表。

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

4. 将新工作表追加到现有工作簿： 使用 XLSX.utils.book_append_sheet() 方法将新的工作表追加到现有的工作簿中。 可以为新的工作表指定一个名称。

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

5. 下载更新后的 Excel 文件： 使用 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("myTable"));
  // 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"; // 替换为你的 Excel 文件 URL
  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');
})();

注意事项

• 跨域问题： 如果你的 Excel 文件位于不同的域名下，可能会遇到跨域问题。 你需要在服务器端配置 CORS 策略以允许跨域请求。
• 文件大小： 处理大型 Excel 文件可能会导致性能问题。 建议对数据进行分页或使用流式处理来优化性能。
• 错误处理： 在实际应用中，应该添加适当的错误处理机制，例如检查文件是否成功加载，以及处理 SheetJS 库可能抛出的异常。
• 异步操作： 由于文件读取和写入是异步操作，建议使用 async/await 或 Promise 来处理这些操作，以确保代码的正确执行顺序。

总结

本教程介绍了如何使用 JavaScript 和 SheetJS 库将 HTML 表格数据追加到现有 Excel 文件。通过以上步骤，你可以轻松地实现将动态数据导出到 Excel 文件的功能，并可以根据需要进行定制和扩展。 记住要处理潜在的错误和跨域问题，并根据实际情况优化性能。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~