一、构造函数
Blob构造函数接受两个可选参数,第一个参数为一个数组,数组的元素可以是任意多个的ArrayBuffer,ArrayBufferView (typed array), Blob,或者 DOMString对象。
第二个参数为一个对象,设置Blob对象的属性
二、方法
slice:返回一个新的Blob对象,它截取了原对象中的一部分内容。
slice方法支持三个可选参数,分别是start、end、contentType
第一个参数start为起始索引,默认为0
第二个参数end为结束索引,默认为最后一个索引
第三个参数contentType为新生成的Blob对象的MIME类型,默认为空字符串
如果start的值大于原始Blob的值,则新生成的Blob对象大小为0,内容是空的。
三、MIME类型
构造函数的第二个参数一般用于设置MIME类型,例如:
new Blob(['test'], {type:'text/plain'});
上面的例子中Blob对象的类型为text/plain,内容为test
设置MIME类型的主要目的是让浏览器知道该如何显示该二进制资源(例如,是图片则显示图片,是网页则解析HTML,是二进制文件则弹出下载框等)
四、示例
下面的例子可以复制到浏览器的控制台中,并将返回的blob:开头的url复制粘贴到地址栏中,就可以看到效果。
显示文本:
var blob = new Blob(['纯文本'],{type: 'text/plain'}); URL.createObjectURL(blob);
显示网页:
var blob = new Blob(['<html><head><title>我是标题</title></head>', '<body><h1>我是内容</h1></body></html>'],{type: 'text/html'}); URL.createObjectURL(blob);
显示一个json:
var blob = new Blob([JSON.stringify({"key":"value"})], {type:'text/json'}); URL.createObjectURL(blob);
作为二进制文件下载:
var blob = new Blob(['文件内容'], {type:'application/octet-binary'}); URL.createObjectURL(blob);
五、兼容性
IE:10+
Firefox:13+
Chrome:20+
Safari:6+
Opera:12.1+