大家好,又见面了,我是你们的朋友全栈君。
在本教程中,我们可以在客户端从我们的 HTML 表数据创建一个 excel 文件。即使用javascript将HTML 表导出到Excel (.xlsx)。
有许多可用的库可以从 HTML 表创建 CSV 文件或 xlsx 文件,但所有库都给出了提示消息。那就是当我们打开该excel文件时,它会提示一条消息,文件名的文件格式和扩展名不匹配。该文件可能已损坏或不安全。
今天这篇文章将使用SheetJS,它允许我们在没有任何提示信息的情况下创建和打开excel文件,这是纯javascript的。
使用 SheetJs 库的第二个优点是它可以轻松地将大型 HTML 表格导出到 excel中,下面提供了一个示例。
您还可以查看我关于如何在客户端 将 HTML 转换为图像的文章。
使用 JavaScript 将 HTML 表格导出到 Excel 的步骤
- HTML 标记:添加带有一些数据的表格。
- 导入 SheetJS 库
- Javascript 代码:使用 SheetJS 库将表格数据导出到 excel 文件中。
HTML 标记:添加带有数据和按钮标记的表格。
这里首先我们添加一个带有一些虚拟数据和一个按钮标签的 HTML 表格。我们的表格 HTML 标记如下所示。
<table id="tbl_exporttable_to_xls" border="1">
<thead>
<th>Sr</th>
<th>Name</th>
<th>Location</th>
<th>Job Profile</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td><p>Amit Sarna</p></td>
<td>Florida</td>
<td>Data Scientist</td>
</tr>
<tr>
<td>2</td>
<td><p>Sagar Gada</p></td>
<td>California</td>
<td>Sr FullStack Dev</td>
</tr>
<tr>
<td>3</td>
<td><p>Ricky Marck</p></td>
<td>Nevada</td>
<td>Sr .Net Dev</td>
</tr>
</tbody>
</table>
<button onclick="ExportToExcel('xlsx')">Export table to excel</button>
在我们的网页上下载并导入 SheetJS 库
要将 HTML 表格数据转换为 excel,我们需要使用SheetJS库。使用 SheetJs,我们可以轻松地将表格数据转换为 Xls 文件。我们可以从Github下载 js 文件或直接使用CDN 托管文件。
导入库代码如下:
<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>
我们完成了 HTML 标记并导入 Sheetjs 库。接下来,我们必须在按钮单击时添加和调用 javascript 函数,即 ExportToExcel。
JavaScript 代码:使用 Sheetjs 库将表格数据导出到 excel 文件中。
这里在按钮标签上,我们添加一个onclick事件,调用js方法即ExportToExcel。最终的javascript方法如下所示:
function ExportToExcel(type, fn, dl) {
var elt = document.getElementById('tbl_exporttable_to_xls');
var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1" });
return dl ?
XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }):
XLSX.writeFile(wb, fn || ('MySheetName.' + (type || 'xlsx')));
}
在上面的 javascript 函数中,tbl_exporttable_to_xls 是我们要导出的 HTML 表的 id。另外,我们设置了base64类型,所以对于旧浏览器IE浏览器没有问题。
在 Internet Explorer 即使用 SheetJS 的浏览器中,我们可以轻松地将 HTML 表格数据导出到 Excel。使用 sheetjs库,我们可以将 Html 表格导出为带格式的 xlsx。
结论:这里使用SheetJS我们可以将Html表格导出到一个excel文件中。此外,当其他库在打开 excel 文件时显示弹出消息时,这里使用 Sheetjs 它会在没有任何弹出消息的情况下打开。我发现这个最好的 javascript 库用于将数据转换为 excel 文件。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/160704.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...