tableExport.min.js 下载及安装
安装方法(这里只考虑导出Excel):
<!--引用以下js文件-->
<script src="js/jquery.min.js"></script>
<!--要将生成的导出文件保存在客户端,请将其包含在html代码中:-->
<script src="libs/FileSaver/FileSaver.min.js"></script>
<!--要以XLSX (Excel 2007+ XML格式)格式导出表格,您需要额外包括SheetJS/js-xlsx:-->
<script src="libs/js-xlsx/xlsx.core.min.js"></script>
<!--不管期望的格式是什么,最后包括:-->
<script src="libs/tableExport.min.js"></script>
使用方法:
$('#test_table').tableExport({ type: 'excel' });
完整例子:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>tableExport</title>
<link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet" type="text/css">
<!--引用以下js文件-->
<script src="js/jquery.min.js"></script>
<!--要将生成的导出文件保存在客户端,请将其包含在html代码中:-->
<script src="libs/FileSaver/FileSaver.min.js"></script>
<!--要以XLSX (Excel 2007+ XML格式)格式导出表格,您需要额外包括SheetJS/js-xlsx:-->
<script src="libs/js-xlsx/xlsx.core.min.js"></script>
<!--不管期望的格式是什么,最后包括:-->
<script src="libs/tableExport.min.js"></script>
<script>
$(function () {
MakeTb();//初始化表格
});
//AJAX动态生成TABLE
function MakeTb() {
$("#tbody").empty();
for (var i = 0; i < 9999; 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);//差不多意思意思得了
}
}
//导出excel
$(function () {
$("#generate-excel").click(function () {
$('#test_table').tableExport({ type: 'excel' });
});
});
</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">
将表格转换为Excel
</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 style='background-color:lightskyblue; color:white; text-align:center;'>
<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>