我正在设计浏览器客户端需要从服务器下载多个文件的Web应用程序;用户将使用下载的文件和应用程序执行某些操作，而不需要在用户的硬件上保存状态。我知道浏览器只能将这些文件保存到沙盒中，只要用户在第二次启动应用程序时就可以检索这些文件。
我应该使用BlobBuilder还是FileSaver？我有点迷失在这里
解决方法
下载文件
要下载文件，您将使用XMLHttpRequest Level 2(也称为XHR2)，它支持跨原始请求，上传进度事件以及上传/下载二进制数据。在帖子“New Tricks in XMLHttpRequest2”中有很多使用XHR2的例子。
要将文件下载为一个blob，您所做的都是将responseType指定为“blob”。您也可以使用类型“文本”，“数组缓冲”或“文档”。下面的功能下载url中的文件并将其发送到成功回调：
function downloadFile(url,success) {
var xhr = new XMLHttpRequest();
xhr.open('GET',url,true);
xhr.responseType = "blob";
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (success) success(xhr.response);
}
};
xhr.send(null);
}
成功回调将作为参数接收Blob的实例，该实例可以稍后修改并保存和/或上传到服务器。
使用FileSystem API保存文件
作为我可以使用…网站points out没有很多浏览器支持FileSystem API。对于Firefox there’s an explanation缺乏支持。因此，您必须使用Chrome才能执行此操作。
首先，您将不得不请求存储空间，它可以是临时的还是持久的。您可能希望拥有永久存储空间，在这种情况下，您将需要先前要求存储空间配额(some facts)：
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.storageInfo = window.storageInfo || window.webkitStorageInfo;
// Request access to the file system
var fileSystem = null // DOMFileSystem instance,fsType = PERSISTENT // PERSISTENT vs. TEMPORARY storage,fsSize = 10 * 1024 * 1024 // size (bytes) of needed space
;
window.storageInfo.requestQuota(fsType,fsSize,function(gb) {
window.requestFileSystem(fsType,gb,function(fs) {
fileSystem = fs;
},errorHandler);
},errorHandler);
现在您可以访问文件系统，您可以从中保存和读取文件。以下功能可以将指定路径中的blob保存到文件系统中：
function saveFile(data,path) {
if (!fileSystem) return;
fileSystem.root.getFile(path,{create: true},function(fileEntry) {
fileEntry.createWriter(function(writer) {
writer.write(data);
},errorHandler);
},errorHandler);
}
一个通过它的路径读取文件：
function readFile(path,success) {
fileSystem.root.getFile(path,{},function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(e) {
if (success) success(this.result);
};
reader.readAsText(file);
},errorHandler);
}
除了readAsText方法之外，根据FileReader API可以调用readAsArrayBuffer和readAsDataURL。
使用FileSaver
帖子“Saving Generated Files on Client-Side”非常好地解释了这个API的使用。有些浏览器可能需要FileSaver.js才能拥有saveAs接口。
如果将它与downloadFile函数一起使用，则可以使用以下内容：
downloadFile('image.png',function(blob) {
saveAs(blob,"image.png");
});
当然，如果用户可以可视化图像，操纵它，然后将其保存在驱动器中，这将更有意义。
错误处理程序
只是为了实现这个例子：
function errorHandler(e) {
var msg = '';
switch (e.code) {
case FileError.QUOTA_EXCEEDED_ERR:
msg = 'QUOTA_EXCEEDED_ERR';
break;
case FileError.NOT_FOUND_ERR:
msg = 'NOT_FOUND_ERR';
break;
case FileError.SECURITY_ERR:
msg = 'SECURITY_ERR';
break;
case FileError.INVALID_MODIFICATION_ERR:
msg = 'INVALID_MODIFICATION_ERR';
break;
case FileError.INVALID_STATE_ERR:
msg = 'INVALID_STATE_ERR';
break;
default:
msg = 'Unknown Error';
break;
};
console.log('Error: ' + msg);
}
有用的链接
> Saving Generated Files on the Client-Side
> Exploring the FileSystem APIs
> New Tricks in XMLHttpRequest2
> Reading Files in JavaScript Using the File APIs
