不要构建 blob,而是构造 blob

Eric Bidelman

下面致敬所有 BlobBuilder 粉丝,即将告别!

BlobBuilder 是使用 JavaScript 创建 Blob(或文件)的便捷 API。自 Chrome 8、FF 6 和 IE 10 起,Chrome 浏览器 8、FF 6 和 IE 10 就已推出。但 Safari 从未支持过,而且可能永远也不再推出。File API 的近期规范更改包括新的 Blob 构造函数,这实质上使 BlobBuilder 无关紧要。事实上,Safari 夜间已将其停用,Chrome 很快会在控制台中显示警告。

为便于比较,以下是使用已废弃的 BlobBuilder 和新 Blob 构造函数的相同代码。该代码段会创建一个样式表,并将其附加到 DOM。

BlobBuilder():

window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
                        window.MozBlobBuilder || window.MSBlobBuilder;
window.URL = window.URL || window.webkitURL;

var bb = new BlobBuilder();
bb.append('body { color: red; }');
var blob = bb.getBlob('text/css');

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);

document.body.appendChild(link);

Blob():

window.URL = window.URL || window.webkitURL;

var blob = new Blob(['body { color: red; }'], {type: 'text/css'});

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link);

方便!因此,现在我们可以根据数据部分的数组创建 Blob,而不是附加到 BlobBuilder。数据部分可以是不同的类型(DOMStringArrayBufferBlob),并且可以按任意顺序排列。例如:

var blob = new Blob(['1234567890', blob, arrayBuffer]);

另请注意,第二个对象参数是可选的。如需详细了解这些更改,请参阅有关 Blob 的 MDN 文档