牛骨文教育服务平台(让学习变的简单)

Blob

2、Blob

Blob(Binary Large Object)对象代表了一段二进制数据,提供了一系列操作接口。比如通过new Blob()创建的对象就是Blob对象.又比如,在XMLHttpRequest里,如果指定responseType为blob,那么得到的返回值也是一个blob对象.

2.1 生成Blob对象

生成Blob对象有两种方法:一种是使用Blob构造函数,另一种是对已有的Blob对象使用slice()方法切出一段。

(1)Blob构造函数

var blob = new Blob(data, type)

Blob构造函数接受两个参数:
参数data是一组数据,所以必须是数组,即使只有一个字符串也必须用数组装起来.
参数type是对这一Blob对象的配置属性,目前也只有一个type也就是相关的MIME需要设置 type的值:
"text/csv,charset=UTF-8" 设置为csv格式,并设置编码为UTF-8
"text/html" 设置成html格式
注意:任何浏览器支持的类型都可以这么用

var blob = new Blob(["我是Blob"],{type: "text/html"});

2.2 属性

blob.size   //Blob大小(以字节为单位)
blob.type   //Blob的MIME类型,如果是未知,则是“ ”(空字符串)

2.3 slice()

slice()返回一个新的Blob对象,包含了源Blob对象中指定范围内的数据。

blob.slice(      
  optional long long start,      
  optional long long end,      
  optional DOMString contentType  };

参数说明:
start 可选,开始索引,可以为负数,语法类似于数组的slice方法.默认值为0.
end 可选,结束索引,可以为负数,语法类似于数组的slice方法.默认值为最后一个索引.
contentType可选 ,新的Blob对象的MIME类型,这个值将会成为新的Blob对象的type属性的值,默认为一个空字符串.

2.4 Blob的使用

使用Blob最简单的方法就是创建一个URL来指向Blob:

<a download="data.txt" id="getData">下载</a>   

var data= "Hello world!";  
var blob = new Blob([data], {   
  type: "text/html,charset=UTF-8"   
});
window.URL = window.URL || window.webkitURL; 
document.querySelector("#getData").href = URL.createObjectURL(blob);

上面的代码将Blob URL赋值给a,点击后提示下载文本文件data.txt,文件内容为“Hello World”。

2.5 URL.createObjectURL()

objectURL = URL.createObjectURL(blob);

使用URL.createObjectURL()函数可以创建一个Blob URL,参数blob是用来创建URL的File对象或者Blob对象,返回值格式是:blob://URL。

注意:在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法传入创建的URL为参数,用来释放它。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。

2.6 乱码问题

当数据中包含汉字时,导出的文件可能会出现乱码,不过我们可以这样解决:

var data = "ufeff" + "汉字";