文章导读

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

站长 2025年8月17日 1

本文介绍了如何使用 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” 的工作表。
```
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 文件中，并实现数据的动态更新和管理。通过修改代码，你可以轻松地适应不同的场景和需求。例如，你可以根据需要自定义工作表的名称，或者将数据追加到特定的工作表中。

评论（已关闭）

评论已关闭

Hello! 欢迎来到悠悠畅享网！