JavaScript SheetJS将 Html 表转换为 Excel 文件

客官°小女子只卖身不卖艺 2023-10-01 17:18 2阅读 0赞

在本教程中，我们可以在客户端从我们的 HTML 表数据创建一个 excel 文件。即使用javascript*将HTML 表导出到Excel* (.xlsx)。

有许多可用的库可以从 HTML 表创建 CSV 文件或 xlsx 文件，但所有库都给出了提示消息。那就是当我们打开该excel文件时，它会提示一条消息，文件名的文件格式和扩展名不匹配。该文件可能已损坏或不安全。

今天这篇文章将使用SheetJS，它允许我们在没有任何提示信息的情况下创建和打开excel文件，这是纯javascript的。

使用 SheetJs 库的第二个优点是它可以轻松地**将大型 HTML 表格导出到 excel**中，下面提供了一个示例。

您还可以查看我关于如何在客户端 [将 HTML 转换为图像的文章。][HTML]

### 使用 JavaScript 将 HTML 表格导出到 Excel 的步骤 ###

1.  HTML 标记：添加带有一些数据的表格。
2.  导入 SheetJS 库
3.  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>

另请阅读：[如何在 JavaScript 中检测浏览器][JavaScript]

### 在我们的网页上下载并导入 SheetJS 库 ###

要将 HTML 表格数据转换为 excel，我们需要使用**SheetJS**库。使用 SheetJs，我们可以轻松地将表格数据转换为 Xls 文件。[我们可以从Github][Github]下载 js 文件或直接使用[CDN 托管文件][CDN]。

导入库代码如下：

我们完成了 HTML 标记并导入 Sheetjs 库。接下来，我们必须在按钮单击时添加和调用 javascript 函数，即 ExportToExcel。

### JavaScript 代码：使用 Sheetjs 库将表格数据导出到 excel 文件中。 ###

这里在按钮标签上，我们添加一个onclick事件，调用js方法即ExportToExcel。最终的javascript方法如下所示：

在上面的 javascript 函数中，tbl\_exporttable\_to\_xls 是我们要导出的 HTML 表的 id。另外，我们设置了base64类型，所以对于旧浏览器IE浏览器没有问题。

在 Internet Explorer 即使用 SheetJS 的浏览器中，我们可以轻松地将 HTML 表格数据导出到 Excel。使用 **sheetjs**库，我们可以将 Html 表格导出为带格式的 xlsx。

结论：这里使用SheetJS我们可以将Html表格导出到一个excel文件中。此外，当其他库在打开 excel 文件时显示弹出消息时，这里使用 Sheetjs 它会在没有任何弹出消息的情况下打开。我发现这个最好的 javascript 库用于将数据转换为 excel 文件。

[HTML]: https://codepedia.info/convert-html-to-image-in-jquery-div-or-table-to-jpg-png
[JavaScript]: https://codepedia.info/detect-browser-in-javascript
[Github]: https://github.com/SheetJS/sheetjs
[CDN]: https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js