您的位置：首页 > 其它

Blob API及问题记录

2016-05-12 14:58 232 查看

接上一篇<js创建下载文件>, 记录核心部分 Blob 的API, >>传送门 , 同时说下使用过程中碰到的一个问题.

先说问题:

用Blob创建后缀为.sql的文件, 内容是包含中文的文本, 结果生成的文本打开后中文部分显示乱码. 尝试加了type后,还是没有改变. 后来想到会不会是因为.sql的mime类型问题, 于是先换成了application/stram的类型, 发现问题依旧. 后来换了个思路, type不变, 取巧把后缀换成了.txt, 结果问题就好了. 因为手上事情比较多, 苦恼之下只能先采取这个方法. 哪位朋友如果有更好的方法欢迎留言告诉我, 先谢谢.

<script>
downloadFile("创建菜单SQL脚本.txt", response);

function downloadFile(fileName, content) {
var aLink = document.createElement('a');
var blob = new Blob([content], { type: "text/plain" });
var evt = document.createEvent("HTMLEvents");
// initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
evt.initEvent("click", false, false);
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
</script>

Blob API:

属性

构造函数

方法
slice()
参数

返回值

注意

BlobPropertyBag

Blob构造函数用法举例

例子：使用类型数组和Blob对象创建一个对象URL

浏览器兼容性
注意：关于slice()的实现

Gecko备注

相关链接

一个

Blob

对象就是一个包含有只读原始数据的类文件对象。

Blob

对象中的数据并不一定得是JavaScript中的原生形式。

File

接口基于

Blob

，继承了

Blob

的功能,并且扩展支持了用户计算机上的本地文件。

创建

Blob

对象的方法有几种，可以调用

Blob

构造函数，还可以使用一个已有

Blob

对象上的

slice()方法

切出另一个

Blob

对象，还可以调用

canvas

对象上的

toBlob

方法。

注：需要注意的是，一些浏览器上的

slice()方法

仍带有前缀：Firefox 12之前的版本上为

blob.mozSlice()，

Safari上为

blob.webkitSlice()

。

注：一些浏览器提供了

BlobBuilder

接口，但并不是所有的浏览器都支持

BlobBuilder

，而且现有的

BlobBuilder

实现都是带前缀的。更主要的是

BlobBuilder已经被废弃，你应该尽可能的使用

Blob

构造函数来代替。

属性Edit

属性名	类型	描述
size	unsigned long long	Blob对象中所包含数据的大小。只读。
type	DOMString	一个字符串，表明该 Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。只读。

构造函数Edit

Blob Blob(
[optional] Array parts,
[optional] BlobPropertyBag properties
);

参数

parts

一个数组，包含了将要添加到

Blob对象中的

数据。数组元素可以是任意多个的

ArrayBuffer，ArrayBufferView

(typed array)，

Blob

，或者

DOMString

对象。

properties

一个对象，设置

Blob对象的一些属性

。查看

BlobPropertyBag

一节。

方法Edit

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属性的值，默认为一个空字符串

。

返回值

一个新的

Blob

对象，包含了源

Blob对象中指定范围内的数据

。

注意

如果

start

参数的值比源

Blob对象的

size

属性的值还大

，则返回的

Blob

对象的size值为0，也就是不包含任何数据。

BlobPropertyBagEdit

一个包含有两个属性

type

和

endings

的对象。

type

设置该

Blob对象的

type属性

。

endings(已废弃)

对应于

BlobBuilder.append()

方法的

endings

参数。该参数的值可以是"transparent"或者"native"。

Blob构造函数用法举例Edit

下面的代码：

var aFileParts = ['<]];
var oMyBlob = new Blob(aFileParts, { "type" : "text/xml" }); // the blob

等价于：

var oBuilder = new BlobBuilder()]var aFileParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"];
oBuilder.append(aFileParts[0]);
var oMyBlob = oBuilder.getBlob("text/xml"); // the blob

BlobBuilder

接口提供了另外一种创建

Blob

对象的方式，但该方式现在已经废弃，所以不应该再使用了。

例子：使用类型数组和Blob对象创建一个对象URLEdit

var typedArray = GetTheTypedArraySomehow()]var blob = new Blob([typedArray], {type: "application/octet-binary"}); // 传入一个合适的MIME类型
var url = URL.createObjectURL(blob);
// 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf这样的URL字符串
// 你可以像使用一个普通URL那样使用它，比如用在img.src上。

浏览器兼容性Edit

Desktop

Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	5	4	10	11.10	5.1
slice()	21 10 webkit‡	13 5 moz‡	10	12	5.1 (534.29) webkit
Blob() constructor	20	13.0 (13.0)	10	12.10	6 (536.10)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	13.0 (13.0)	?	?	?

注意：关于slice()的实现

slice()方法一开始

使用

length来作为第二个参数

，表示需要向新

的Blob对象拷贝多少个字节

。如果你指定的参数值

start + length的值超过

了源

Blob对象的长度

，则返回的

Blob

对象包含了从

start索引到源

Blob对象结束索引处的所有数据

。

这个版本的

slice()

实现于Firefox 4， WebKit，以及 Opera 11.10中。可是，由于这个语法和我们常用的

Array.slice()

以及

String.slice()

语法不同，所以已被废弃。Gecko和WebKit目前支持的是新版的

slice

语法。

从Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10)和Chrome 21开始，

slice()

去掉了前缀。

Gecko备注

在Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9)之前，

slice()

方法有个bug，就是参数

start

和

end

的值不能超出64位无符号数字范围，现已修复。