JavaScript table转为excel:将HTML table数据转换/导出为excel

2021年8月12日19:34:57 发表评论 2,540 次浏览

JavaScript table转为excel:将HTML table数据转换/导出为Excel XLS:在本教程中,我们可以从客户端的 HTML table数据创建一个 excel 文件。即使用 JavaScript将 HTML table转为Excel (.xlsx)。

相关推荐:Python合并CSV:合并两个或多个CSV文件

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

相关推荐:Python批量合并多个CSV

今天这篇文章将使用SheetJS实现HTML table转为excel,它允许我们在没有任何提示信息的情况下创建和打开excel文件,这是纯javascript的。使用 SheetJs 库的第二个好处是它可以轻松地将大型 HTML table导出到 excel 中,下面提供了一个示例。你还可以查看我关于如何在客户端将 HTML 转换为图像的文章。 

JavaScript table转为excel的详细步骤

  1. HTML 标记:添加包含一些数据的table。
  2. 导入 SheetJS 库
  3. JavaScript 代码:使用 SheetJS 库将table数据导出到 excel 文件中。

JavaScript table转为excel视频教程:

HTML 标记:添加带有数据和按钮标签的table

HTML table转为excel的第一步:首先,我们添加一个带有一些虚拟数据和按钮标记的 HTML table。我们的table 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>
<!-- JavaScript table转为excel -->
<button onclick="ExportToExcel('xlsx')">Export table to excel</button>

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

要实现JavaScript table转为excel,我们需要使用SheetJS库。使用 SheetJs,我们可以轻松地将HTML table转为excel 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 库将HTML table转为excel文件

这里在按钮标签上,我们添加了一个onclick 事件并调用了js 方法即ExportToExcel。JavaScript table转为excel 方法和代码如下所示:

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 table的 id。另外,我们设置了base64类型,所以对于旧浏览器IE浏览器来说没有问题。

在Internet Explorer ie 浏览器中使用SheetJS,我们可以轻松地将HTML table数据导出到excel。使用 sheetjs库,我们可以将 Html table导出为带格式的 xlsx。

Javascript table转为excel总结这里使用 SheetJS 我们可以将HTML table导出excel文件。此外,由于其他库在打开 excel 文件时显示弹出消息,这里使用 Sheetjs,它可以在没有任何弹出消息的情况下打开。我发现这是将HTML table转为excel 文件的最佳 javascript 库。

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: