直接上代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>将表格转换为CSV</title>
<link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet" type="text/css">
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
MakeTb();//初始化表格
});
//AJAX动态生成TABLE
function MakeTb() {
$("#tbody").empty();
for (var i = 0; i < 99; i++) {
var html = "";
html += "<tr>";
html += "<td><span>" + (i + 1) + "</span></td>";
html += "<td><span>张三" + (i + 1) + "</span></td>";
html += "<td><span>男" + (i + 1) + "</span></td>";
html += "<td><span>江苏省" + (i + 1) + "</span></td>";
html += "<td><span>南京市" + (i + 1) + "</span></td>";
html += "<td><span>秦淮区" + (i + 1) + "</span></td>";
html += "</tr>";
$("#tbody").append(html);//差不多意思意思得了
}
}
//将表格转换为CSV
$(function () {
$("#generate-excel").click(function () {
tb2csv("test_table");//导出
});
});
//导出csv文件
function tb2csv(tbId) {
var $trs = $("#" + tbId).find("tr");//表格id元素
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 csv = "data:text/csv;charset=utf-8,\ufeff" + str;
var link = document.createElement("a");
link.setAttribute("href", csv);
link.setAttribute("download", new Date().getTime() + ".csv");//文件名
link.click();//下载文件
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" style="padding:2em 0;">
<button type="button" class="btn btn-success btn-block" id="generate-excel">
将表格转换为CSV
</button>
</div>
<div class="col-md-12" style="padding:2em 0;">
<div class="table-responsive">
<table class="table table-bordered" id="test_table">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>省</th>
<th>市</th>
<th>区</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
直接复制以上代码粘贴到*.html文件里运行即可看到效果...
*.csv文件比*.xls、*.xlsx文件,更适合导出大量的数据