代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<title>导出表格内容html->.xls</title>
<body>
<table id="table_content" border="1" width="700px">
<tr>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td>001</td>
<td>烟花</td>
</tr>
<tr>
<td>002</td>
<td>逍遥</td>
</tr>
<tr>
<td>003</td>
<td>墨蝶</td>
</tr>
</table>
<a id="output_table">导出</a>
<script>
// 核心:拼接完整的html格式文档并填充数据
//使用outerHTML属性获取整个table元素的HTML代码, 包括根标签<table></table>
// 自定义封装html格式文档<html><head></head><body></body></html>
// 设置字符集,告诉浏览器以utf8方式解析,避免乱码<meta charset='utf-8'/>
// 获取table数据并填充到自定义的html格式文档中
var table_content = document.querySelector("#table_content").outerHTML;
var html = "<html><head><meta charset='utf-8' /></head><body>" + table_content + "</body></html>";
// 实例化一个Blob对象,
// param1:包含文件内容的数组,
// param2:包含文件类型属性的对象
var blob = new Blob([html], {
type: "application/vnd.ms-excel"
});
var output_table = document.querySelector("#output_table");
// 利用URL.createObjectURL()方法为a元素生成blob URL
output_table.href = URL.createObjectURL(blob);
// 设置文件名,低级浏览器不支持
output_table.download = "学生信息表.xls";
</script>
</body>
</html>
效果图
在线测试
https://lengyuexin.github.io/output/
学习资源推荐:https://blog.csdn.net/qq_42813491/article/details/90213353