
本文介绍如何使用 JavaScript 将 HTML 表格数据追加到现有的 Excel 文件中,并在每次运行时创建一个新的工作表。我们将使用 SheetJS Community Edition 库来实现这个功能,该库允许我们读取、修改和写入 Excel 文件。通过本文,你将学习如何从 HTML 表格提取数据,读取现有的 Excel 文件,将数据作为新的工作表追加到文件中,并最终下载更新后的 Excel 文件。
在 Web 开发中,经常需要将数据导出到 Excel 文件。如果需要将动态生成的 HTML 表格数据追加到现有的 Excel 文件,并为每次操作创建一个新的工作表,则需要一些额外的步骤。以下是如何使用 SheetJS 库来实现此目标的详细教程。
<script src="https://cdn.sheetjs.com/xlsx-0.18.8/package/dist/xlsx.full.min.js"></script>
<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免费学习笔记(深入)”;
以下是一些可选的 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速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号