得助于 https://segmentfault.com/a/1190000005863250 感谢!!
采用HTML 5 新的特性download
,结合 JavaScript 的Blob对象。将文本或者JS字符串信息借助Blob转换成二进制,作为<a>
元素的href
属性,配合download
属性,实现下载。
a标签你可以提前在页面上创建,或者采用js创建,都是ok的。假设此时我已经为页面添加了a标签,并为之设置了一个id,为download 。
接下来为a标签设置href属性及download 属性:
// 使用outerHTML属性获取整个table元素的HTML代码(包括<table>标签),然后包装成一个完整的HTML文档,设置charset为urf-8以防止中文乱码
var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("testTable").outerHTML + "</body></html>";
// 实例化一个Blob对象,其构造函数的第一个参数是包含文件内容的数组,第二个参数是包含文件类型属性的对象
var blob = new Blob([html], { type: "application/vnd.ms-excel" });
// 利用URL.createObjectURL()方法为a元素生成blob URL
$('#download').attr('href',URL.createObjectURL(blob));
// 设置文件名
$('#download').attr('download',"XXX数据表.xls");
此时,可以检查下a标签属性值是否渲染成功。以上采用的了jquery,记得引入jquery 或者改成javascript哦~