html:
<table id="data">
<tr>
<th>序号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>680</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>664</td>
</tr>
</table>
<!--必须是a标签,如果是button标签没有href属性,无法设置href属性,最后不能生成excel文件-->
<a id="toExcel">导出excel</a>
js:
var element = document.getElementById("toExcel");
var toExcel = function(event) {
var html = "<html><head><meta charset='UTF-8'></head><body>"+document.getElementById("data").outerHTML+"</body></html>";
// 创建一个Blob对象,第一个参数是文件的数据,第二个参数是文件类型属性对象
var blob = new Blob([html],{type:"application/vnd.ms-excel"});
var a = event.target;
// 利用URL的createObjectURL方法为元素a生成blobURL
a.href = URL.createObjectURL(blob);
// 设置文件名
a.download = "成绩";
}
element.onclick = toExcel;
innerHTML
设置或获取位于对象起始和结束标签内的HTML
eg:<div id="test"> <span>test</span> </div> console.log(document.getElementById('test').innerHTml) 输出: <span>test</span>
outerHTML
设置或获取对象及其内容的HTML形式<div id="test"> <span>test</span> </div> console.log(document.getElementById('test').outerHTML) 输出: <div id="test"><span>test</span></div>
相关链接
Blob