使用 JavaScript 将 HTML 表格追加到现有 Excel 文件-html教程-PHP中文网

使用 JavaScript 将 HTML 表格追加到现有 Excel 文件

聖光之護

发布： 2025-08-17 19:48:13

原创

895人浏览过

使用 javascript 将 html 表格追加到现有 excel 文件

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

方案概述

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

准备工作

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

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

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

登录后复制

实现步骤

以下是将 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" 的工作表。

酷表ChatExcel
北大团队开发的通过聊天来操作Excel表格的AI工具

48

查看详情
```
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 表格示例

<table id="test_table" class="tftable" border="1">
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th><th>Header 5</th></tr>
<tr><td>NEW Row:1 Cell:1</td><td>NEW Row:1 Cell:2</td><td>NEW Row:1 Cell:3</td><td>NEW Row:1 Cell:4</td><td>Row:1 Cell:5</td></tr>
<tr><td>NEW Row:2 Cell:1</td><td>NEW Row:2 Cell:2</td><td>NEW Row:2 Cell:3</td><td>NEW Row:2 Cell:4</td><td>NEW Row:2 Cell:5</td></tr>
</table>

登录后复制

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 文件的详细内容，更多请关注php中文网其它相关文章！