通过 BlobBuilder 创建文件

由于网站越来越多地转向 Web 应用程序，所以能够以更有作为的方式处理文件变得越来越重要。从 Platform Preview 2 开始，IE10 支持文件 API，令开发人员可以读取和切分客户端上的文件。Platform Preview 4 增加了对 BlobBuilder 的支持，通过它开发人员可以创建新文件。IE10 还有两种新方法，允许用户将 blob 保存到其计算机，从而在处理客户端驻留的数据时实现极佳的端到端体验。

在 IE 测试驱动程序页面上，我们提供了一个有趣的钢琴演示，用来演示 BlobBuilder 和文件 API 功能。当按动钢琴上的音键时，网站会构建两个文件：一个 mp3 音乐文件，和一个记录音乐得分的 SVG 文件。您可以看到，每次按下一个音键时，两个文件的大小也随之变化。按播放按钮可以听到您演奏的曲调，或者按钢琴键上面的链接可以下载音乐文件或 SVG 得分文件。在本博文中，我将详细介绍这个演示如何工作，重点介绍 BlobBuilder 和文件 API 的功能。

BlobBuilder 功能

顾名思义，BlobBuilder 是指一种在客户端上构建 blob 的方式。完成此项任务的主要方法是 append。append 函数接受三种数据类型：

• Blob 对象
• 纯文本
• 数组缓存

钢琴演示使用一个 blob 代表一个音符，再将 blob 附加到一起，从而创建 mp3 文件。该演示通过附加包含 SVG 源的文本，来创建包含音乐得分的 SVG 文件。

getBlob 是 BlobBuilder 对象上的另一种可用方法，它将返回一个 blob 对象，其中包含以前附加的所有项。下面是利用 BlobBuilder 创建文本文件的一个简单示例：

// The BlobBuilder constructor is prefixed in all browsers.

// Use MSBlobBuilder in IE, MozBlobBuilder in Firefox, and WebKitBlobBuilder in WebKit-based browsers.

var bb = new MSBlobBuilder();

 

bb.append("Hello World!");

var blob1 = bb.getBlob("text/plain");

关于 getBlob 方法要注意的一件事是，当您在 IE10 和 Firefox 调用 getBlob 时，将会清除 BlobBuilder 对象的内容，所以下次您调用附加时，就好象您附加到一个新的 BlobBuilder 对象一样。在调用 getBlob 后，WebKit 当前不会清除 BlobBuilder 的内容。请看以下示例：

var bb = new MSBlobBuilder();

bb.append("Hello World!");

var blob1 = bb.getBlob("text/plain");

bb.append("BlobBuilder is great");

var blob2 = bb.getBlob("text/plain");

在所有浏览器中，blob1 将包含文本“Hello World!”。但 blob2 则不然。在 IE10 和 Firefox 中，blob2 将包含文件“BlobBuilder is great”，而在基于 WebKit 的浏览器中，它将包含文本“Hello World!BlobBuilder is great”。Web 应用程序工作组仍在对这种差别进行热烈讨论。

通过 XHR 获取 Blob

文件 API 会令您方便地访问用户选择的文件，我在 Magnetic Poetry 演示中演示了这项功能。当您想要将用户拥有的数据合并到您的网站时，这个功能非常有用。不过，在钢琴演示中，我需要将音符文件内置到演示中。当您想要使用 blob 但又希望提供数据时，您可以使用 XHR。

IE10 的新增功能是 XHR responseType 属性。responseType 属性支持四个值：blob、array buffer、text 和 document。在钢琴演示的初始化方法中 - getBlobs() - 您将看到以下内容：

var req = new XMLHttpRequest();

var url = 'PianoNotes/AllNotes2.mp3';

req.open('GET', url, false);

req.responseType = "blob";

req.onload = function () { /* ... */ };

req.send(null);

您可能会注意到该演示仅发出一个单一 XHR 请求。它仅下载一个文件，包含演示中使用的所有音符。不过，当您在演示中按下一个键时，只会发出一个单一的音符，网站仅将该单一音符附加到 mp3 文件。为了实现上述所述，在下载包含所有音符的文件后，网站会使用文件 API slice 方法对文件进行切分，然后提取出 24 个音符。与下载 24 个文件相比，这是极大的性能改进。

创建音乐文件

如果在演示中每个音符分别对应有一个 blob，则创建 mp3 文件非常简单。每次您按一个键，我将调用：

musicBlobBuilder.append(noteBlob);

为了更新文件大小，我获取该 blob，然后获取文件大小。

var musicBlob = musicBlobBuilder.getBlob("audio/mp3");

// display musicBlob.size

最终，因为我知道当我调用 getBlob 时 BlobBuilder 对象的内容已经清除，我只需将 blob 重新附加到以下内容中：

musicBlobBuilder.append(musicBlob);

创建 SVG 文件

每次您在演示中按下一个键，您就会看到一个音符添加到音乐得分中。音乐得分由一个单一的 SVG 元素计算得出，包含在一个名为“scoreContainer”的 div 中。每次您按下一个键，该脚本会运行，就将一个音符添加到 SVG 元素，然后通过附加该源创建 SVG 文件：

svgBlobBuilder.append(document.getElementById("scoreContainer").innerHTML);

var svgBlob = svgBlobBuilder.getBlob("image/svg+xml");

// display svgBlob.size

在这种情况下，我不会重填 svgBlobBuilder，因为我希望下次当用户按下某个键时，从一个空白曲调开始。

将文件保存到磁盘

该演示的最后一部分是将文件保存到磁盘。当您按钢琴键顶部的“Music File”（音乐文件）和“Musical Score File”（音乐得分文件）链接时，您将可以保存文件，不过感觉上类似于下载一个文件：

请注意，通知栏在 Platform Preview 各版本中不可用。而是呈现一个保存对话框。

每个链接调用 saveSong() 或 saveSheetMusic()。查看下面的每个方法会看到他们使用 msSaveOrOpenBlob 函数的情况：

window.navigator.msSaveOrOpenBlob(svgBlob, "MusicScore.svg");

msSaveOrOpenBlob 和 msSaveBlob 是 IE10 中提供的两种方法，允许网站询问用户是否将 blob 保存到他们的计算机。

调用 msSaveOrOpenBlob 将会在通知栏上提供一个打开该文件的选项（除了保存或取消选项之外）。调用 msSaveBlob 仅提供保存文件或取消文件的选项。尽管这些功能尚未包含进任何标准，我们相信他们对于利用 blob 编写端到端方案特别有用，希望他们将来某一天成为标准。

创建钢琴演示是一个有趣的体验，我将非常高兴看到你们使用 BlobBuilder 的情况。欢迎您的任何反馈！

—Internet Explorer 项目经理 Sharon Newman