JavaScript Blob对象详解

Blob对象为大二进制对象,一个Blob对象就是一个包含有只读原始数据的类文件对象。

一、构造函数

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+