首页 专题 H5案例 前端导航 UI框架

HTML5中的Blob对象的使用

阅读 1374 评论 0
HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MINE类型。

直接上例子:

<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元素里。


如果有任何疑问或建议,欢迎在下方的评论区留言!



关注”全栈技术杂货铺“

全栈技术杂货铺