需求:获取后台数据,动态生成table后,导出excel表格,要求格式与table格式一致
直接上代码:
<a id="export">导出</a>
<table id="table" class="table table-hover table-bordered" border="1" cellspacing="0">
<thead>
<th>
<td>序号</td>
</th>
<th>
<td>单元</td>
</th>
<th>
<td>措施</td>
</th>
</thead>
<tbody id="TuTable"></tbody>
</table>
以上是html基础部分,调取后台接口获取数据后渲染 tbody 中的内容,通过 new Blob(),导出excel表格:
$("#export").click(()=>{
// 使用outerHTML属性获取整个table元素的HTML代码(包括<table>标签),然后包装成一个完整的HTML文档,设置charset为urf-8以防止中文乱码
var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";
// 实例化一个Blob对象,其构造函数的第一个参数是包含文件内容的数组,第二个参数是包含文件类型属性的对象
var blob = new Blob([html], { type: "application/vnd.ms-excel" });
var a = document.getElementsByTagName("a")[0];
// 利用URL.createObjectURL()方法为a元素生成blob URL
a.href = URL.createObjectURL(blob);
// 设置文件名
a.download = "xxx.xls";
})
学习Blob请参考:Blob - Web API 接口参考 | MDN