大家好！今天珊妹儿给大家分享一个前端js导出csv文件的功能，之前珊妹儿在做后端的时候，记得都是在后端开发的导出文件功能，这次第一次在前端来做导出功能，发现也挺容易的，那么接下来就来给大家盘一盘。。。
首先文件先引入jquery.min.js文件，然后接下来的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-1.12.4.min.js"></script>
</head>
<body>
<a class="btn" id="productqueryOutXls" target="">导出</a>
<table class="" id="alternatecolor">
<thead>
<tr>
<th>订单号</th>
<th>订单时间</th>
<th>订单状态</th>
<th>订单金额</th>
<th>支付方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>1234567</td>
<td>2019-01-23 01:30:09</td>
<td>complete</td>
<td>$25.05</td>
<td>paypal</td>
</tr>
</tbody>
</table>
<script>
$(document).on("click", "#productqueryOutXls", function () {
var $trs = $("#alternatecolor").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();
});
</script>
</body>
</html>
大家实际应用中，可能是表格导出，那就比较容易了，直接使用这个逻辑就可以，如果页面导出数据不是存在表格中，那么大家就根据需要去取出数据，组合成字符串就可以啦~~~
补充一下，如果拼接字符串中遇到特出字符导致导出数据不全，我们可以针对容易出现特殊字符的列使用encodeURIComponent（）转义一下就好了^_^
扫一扫
1833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
