java 读取html5 blob,HTML5中的Blob对象的使用

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

直接上例子：

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标签。

此外，如果你需要给导出的表格等设置样式，你可以这样做：下载

var getData= "\ufeff" +

"

填写数据abc

";

var blob = new Blob([getData], { type: 'text/csv,charset=UTF-8' });

document.querySelector("#getData").href = URL.createObjectURL(blob);

注意a元素的download属性值的后缀是.xlsx，而且导出的数据必须包裹在html元素里。

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