当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript添加表格到Excel教程

JavaScript添加表格到Excel教程

2025-08-26 14:37:05 0浏览收藏

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

将 HTML 表格追加到现有 Excel 文件：JavaScript 教程

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

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

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

准备工作

引入 SheetJS 库： 首先，需要在 HTML 文件中引入 SheetJS 库。可以通过 CDN 引入，也可以下载库文件并在本地引入。
```
<script src="https://cdn.sheetjs.com/xlsx-0.18.8/package/dist/xlsx.full.min.js"></script>
```

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

实现步骤

获取 HTML 表格数据： 使用 XLSX.utils.table_to_book() 方法将 HTML 表格转换为 SheetJS 可以处理的格式。
```
var table = document.getElementById('myTable');
var wb = XLSX.utils.table_to_book(table);
```

读取现有的 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);

创建新的工作表： 从转换后的表格数据中提取工作表。
```
const newSheet = wb.Sheets["Sheet1"];
```
将新工作表追加到现有工作簿： 使用 XLSX.utils.book_append_sheet() 方法将新的工作表追加到现有的工作簿中。可以为新的工作表指定一个名称。
```
XLSX.utils.book_append_sheet(workbook, newSheet, "Appended Sheet", true);
```
下载更新后的 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');
})();