起风网<div id="table_wrapper">
<table bordercolor="black" class="tableA">
<tr class="title">
<th colspan="4">学生信息</th>
</tr>
<tr>
<th>名字</th>
<th>性别</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>19</td>
<td>1班</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>20</td>
<td>2班</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>21</td>
<td>3班</td>
</tr>
<tr class="footer">
<td colspan="4">总人数：3人</td>
</tr>
</table>
</div>
<a id="down-file" href="#">点击下载文件</a>
window.onload = function() {
var oTable = document.getElementById("table_wrapper").innerHTML;
var excelHtml = ` <html> <head> <meta charset='utf-8' /> <style> .tableA { border-collapse: collapse; } .tableA .title th{ height: 50px; font-size: 24px; font-family: '微软雅黑'; font-weight: 700; } .tableA tr th { border: 1px #000 solid; height: 40px; background: #efefef; } .tableA tr td { padding: 0 40px; border: 1px #000 solid; height: 40px; text-align: center; } .tableA .footer td { font-size: 20px; font-weight: 700; } </style> </head> <body> ${ oTable} </body> </html> `;
// 创建 Blob 对象
var excelBlob = new Blob([excelHtml], { type: "application/vnd.ms-excel" });
var oA = document.getElementById("down-file");
// 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的 URL 字符串
// 这里 URL.createObjectURL(excelBlob) 会创建一个URL 的 Blob 对象
oA.href = URL.createObjectURL(excelBlob);
oA.download = "test.xls";
oA.click = function() {
this.click();
};
};
这个主要使用了 Blob 对象。Blob 对象表示一个不可变、原始数据的类文件对象。
第一个参数是要转换为 Blob 对象的数据（要用[]包裹），第二个参数是要转换的数据的类型。
这里要转换为 Excel 所以 type 写成：application/vnd.ms-excel。
给 <a></a> 标签的 href 属性添加 URL的Blob对象 后，每当点击这个链接，就会将 Blob 对象保存为指定类型的文件。
Demo体验地址：https://liuyib.github.io/blog/demo/blog/c-html-to-excel/
以上 ?
评论前必须登录！
立即登录