HTML5中的Blob对象的使用
<a download="data.csv">
var getData= "\ufeff" + "填写数据abc";
var blob = new Blob([getData], {
type: 'text/csv,charset=UTF-8'
});
document.querySelector("#getData").href = URL.createObjectURL(blob);
我们来逐一分析：
a标签就不用说了，这里是定义一个可供下载的链接，download是a的新属性，也既是定义下载时的文件名。
创建了一个Blob对象，new Blob(data, type)
第一个参数data是一组数据，所以必须是数组，即使只有一个字符串也必须用数组装起来。
第二个参数是对这一Blob对象的配置属性，目前也只有一个type也就是相关的MIME需要设置
type的值：
'text/csv,charset=UTF-8' 设置为csv格式，并设置编码为UTF-8
'text/html'
注意：任何浏览器支持的类型都可以这么用
可能你们也注意到了，在上面的例子中，其实我们真正的数据是"填写数据abc"这段，那前面的"\ufeff"是什么意思呢？ 其实，是为了解决乱码问题。
那么，我们为什么要将数据保存为Blob对象呢？
其实，就像上面的例子一样，将数据保存为Blob对象后，我们可以将Blob对象创建出一个URL来访问它。我们使用URL对象的createObjectURL方法，然后将得到的url赋值给a标签。
此外，如果你需要给导出的表格等设置样式，你可以这样做：
<a download="data.xlsx" id="getData">下载</a>
<script>
var getData= "\ufeff" +
"<html><style>.red{color:red;}</style><div class='red'>填写数据abc</div></html>";
var blob = new Blob([getData], { type: 'text/csv,charset=UTF-8' });
document.querySelector("#getData").href = URL.createObjectURL(blob);
</script>
注意a元素的download属性值的后缀是.xlsx，而且导出的数据必须包裹在html元素里。
如果有任何疑问或建议，欢迎在下方的评论区留言！
关注”全栈技术杂货铺“
