jquery前端实现数据表格导出成csv文件

   2021-03-25 17:58:30

javascript

前端数据量较小，没有使用分页或者只需要导出当前这一页数据时可以使用以下jquery前端导出的方式，这样可以不用再回传控制器去整理数据再处理。

表格数据如下：

<a class="btn" id="export" target="">导出</a>
<table class="" id="table1">
	<thead>
		<tr>
			<th>姓名</th>
			<th>班级</th>
			<th>成绩</th>
			<th>性别</th>
			<th>爱好</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>小二</td>
			<td>一班</td>
			<td>96</td>
			<td>男</td>
			<td>游戏</td>
		</tr>
	</tbody>
</table>

导入jquery，导出csv的代码如下：

$(document).on("click", "#export", function () {
	var $trs = $("#table1").find("tr");
	var str = "";
	for (var i = 0; i < $trs.length; i++) {
		var $tds = $trs.eq(i).find("td,th");
		for (var j = 0; j < $tds.length; j++) {
			str += $tds.eq(j).text() + ",";
		}
		str += "\n";
	}
	var aaaa = "data:text/csv;charset=utf-8,\ufeff" + str;
	var link = document.createElement("a");
	link.setAttribute("href", aaaa);
	var date=new Date().getTime();
	var filename = new Date(date).toLocaleDateString();
	link.setAttribute("download", filename + ".csv");
	link.click();
});