6

我在 indexeddb 文件中有一些数据，我想让我的用户下载这些数据以导入其他应用程序。我可以使用 Blob 轻松地做到这一点：

 var blob = new Blob(['herp!'], {type: 'application/octet-stream'});
 var iframe = document.createElement("iframe");
 iframe.id = "myiframe";
 iframe.style.display = "none";
 iframe.src = window.webkitURL.createObjectURL(blob); // needs a revokeObjectURL
 $('#dlplaceholder').append(iframe);

Blob 的正确类型参数是关键：如果我将其设置为 text/plain，它将不会下载文件。如果我有 iframe 的高度和宽度以及块的显示类型，我可以看到 iframe 中的数据。

但是，我想用我的数据库中的多个值构建一个文件，每个值都可能很大，而且我可以有很多条目。我可以在 Blob 构造函数中连接这些值，但我担心内存中有太多数据会炸毁。

所以我决定在沙盒系统中创建一个文件并将每个值附加到它，并使用该文件而不是 blob 作为 createObjectURL 的参数。但是当我这样做时，它不会下载；它的行为就像我将我的 Blob 代码与一种文本/纯文本一起使用一样。这是代码：

var fname = 'mybadtest'; //UPDATE here's the problem: needs .bin file extension
var init_fs = function ( fs ) {
  // first, write to the sandboxed file
  fs.root.getFile(fname, {create: true, exclusive: true}, function(fileEntry) {
    fileEntry.createWriter(function(fileWriter) {
      fileWriter.onwriteend = function(e) {
        // write to file completed. now use the file for download
        fs.root.getFile(fname, {}, function(fileEntry) {
          fileEntry.file(function(file) {
            var iframe = document.createElement("iframe");
            iframe.id = "myiframe";
            iframe.style.display = "none";
            iframe.src = window.webkitURL.createObjectURL(file) // needs revokeObjURL                                        
            $('#dlplaceholder').append(iframe);
          }, errorHandler);
        }, errorHandler);
     };
     var blob = new Blob(['derp!'], {type: 'application/octet-stream'});
     fileWriter.write(blob);
   }, errorHandler);
  }, errorHandler);
};

window.webkitStorageInfo.requestQuota(PERSISTENT, mysz, function(grantedBytes) {
  window.webkitRequestFileSystem(PERSISTENT, grantedBytes, init_fs, errorHandler);
}, err_function );

如果我给 iframe 一个大小并将显示设置为阻止，我可以看到我写入文件的数据。所以我知道我的文件写入部分是正确的。

关于如何为文件提供正确类型以便下载的任何想法？我已经阅读了 MDN 文档、HTML5 Rocks tuts 和 Eric Bidelman 的“使用文件系统 API”一书，但我没有看到任何可以解决这种情况的内容。我正在使用 Chrome 版本 27.0.1453.110。

更新：问题已解决；请参阅下面的评论。

更新的更新：请参阅 Rob W 关于下面替代方法的有用评论。

4

0 回答 0