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

聖光之護
发布: 2025-08-17 19:26:01
原创
663人浏览过

将 html 表格追加到现有 excel 文件:javascript 教程

本文介绍如何使用 JavaScript 将 HTML 表格数据追加到现有的 Excel 文件中,并在每次运行时创建一个新的工作表。我们将使用 SheetJS Community Edition 库来实现这个功能,该库允许我们读取、修改和写入 Excel 文件。通过本文,你将学习如何从 HTML 表格提取数据,读取现有的 Excel 文件,将数据作为新的工作表追加到文件中,并最终下载更新后的 Excel 文件。

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

在 Web 开发中,经常需要将数据导出到 Excel 文件。如果需要将动态生成的 HTML 表格数据追加到现有的 Excel 文件,并为每次操作创建一个新的工作表,则需要一些额外的步骤。以下是如何使用 SheetJS 库来实现此目标的详细教程。

准备工作

  1. 引入 SheetJS 库: 首先,需要在 HTML 文件中引入 SheetJS 库。可以使用 CDN 链接:
<script src="https://cdn.sheetjs.com/xlsx-0.18.8/package/dist/xlsx.full.min.js"></script>
登录后复制
  1. HTML 表格: 确保已经存在一个包含数据的 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>
登录后复制

实现步骤

以下是 JavaScript 代码,用于从 HTML 表格中提取数据,读取现有 Excel 文件,将数据作为新工作表追加到文件中,并下载更新后的文件:

(async () => {
  // 1. 从 HTML 表格获取数据
  var data_to_append = XLSX.utils.table_to_book(
    document.getElementById("test_table")
  );

  // 2. 获取要追加的工作表 "Sheet1"
  const newSheet = data_to_append.Sheets["Sheet1"];

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

  // 4. 从原始 Excel 文件数据创建工作簿
  const workbook = XLSX.read(data);

  // 5. 将工作表追加到工作簿,命名为 "Appended Sheet"
  XLSX.utils.book_append_sheet(workbook, newSheet, "Appended Sheet", true);

  // 6. 尝试启动文件下载
  XLSX.writeFile(workbook, "workbook.xls");
})();
登录后复制

代码解释:

立即学习Java免费学习笔记(深入)”;

酷表ChatExcel
酷表ChatExcel

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

酷表ChatExcel 48
查看详情 酷表ChatExcel
  1. XLSX.utils.table_to_book(document.getElementById("test_table")): 此函数将 HTML 表格转换为 SheetJS 工作簿对象。
  2. data_to_append.Sheets["Sheet1"]: 获取从 HTML 表格转换来的工作簿中的名为 "Sheet1" 的工作表。
  3. fetch(url): 使用 fetch API 获取现有 Excel 文件的数据。需要替换 url 为你的 Excel 文件 URL。
  4. XLSX.read(data): 使用 SheetJS 读取现有 Excel 文件的数据,并将其转换为工作簿对象。
  5. XLSX.utils.book_append_sheet(workbook, newSheet, "Appended Sheet", true): 将新的工作表追加到现有工作簿,并将其命名为 "Appended Sheet"。
  6. XLSX.writeFile(workbook, 'workbook.xls'): 使用 SheetJS 创建一个新文件,并启动下载。

注意事项

  • 跨域问题: 如果 Excel 文件位于不同的域中,可能会遇到跨域问题。确保服务器已配置 CORS 策略,允许从你的域访问文件。
  • 文件 URL: 请确保 url 变量指向有效的 Excel 文件。
  • SheetJS 版本: 此代码使用 SheetJS Community Edition 0.18.8 版本。不同版本可能存在差异,请参考 SheetJS 官方文档。
  • 错误处理: 在实际应用中,应添加错误处理机制,例如使用 try...catch 块来处理可能发生的异常。
  • 文件名: XLSX.writeFile 函数中的文件名 'workbook.xls' 可以根据需要更改。

示例 CSS 样式

以下是一些可选的 CSS 样式,用于美化 HTML 表格:

.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;
}
登录后复制

总结

通过使用 SheetJS 库,可以方便地将 HTML 表格数据追加到现有的 Excel 文件中,并为每次操作创建一个新的工作表。只需几个简单的步骤,即可实现此功能。请确保正确引入 SheetJS 库,并根据实际情况调整代码中的 URL 和文件名。此外,请注意跨域问题和错误处理,以确保代码的稳定性和可靠性。

希望本教程对您有所帮助!

以上就是将 HTML 表格追加到现有 Excel 文件:JavaScript 教程的详细内容,更多请关注php中文网其它相关文章!

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号