是否可以直接从网络工作者保存文件？

Question

我有一个完全基于浏览器（即没有后端）的应用程序，它分析平均每个大约 250MB 的文件中的 XML 数据。实际的解析和分析发生在 Web Worker 中，FileReader 实例以 64KB 块的形式提供数据，这一切都非常高效。

我有一个来自客户端的请求来扩展这个应用程序，以便它可以生成一个包含原始输入文件和分析结果的 .zip 文件，并允许用户将该文件保存到她的本地计算机上。在内存中生成包含这些内容的 .zip 文件不是问题。问题在于将大量数据从生成它的网络工作者传输回主浏览器线程，以便可以保存；尝试这样做总是会引发崩溃或内存不足的异常。 （我尝试过一次传输所有字符串，一次传输一个块，我尝试使用 ArrayBuffer 作为可传输对象以避免复制。所有操作都以相同的方式失败。）

不幸的是，我不知道有什么方法可以直接从工作线程调用文件保存操作。我从主浏览器线程中知道了几种这样做的方法，但它们都需要能够创建 DOM 节点（工作线程当然不能这样做），或者使用接口（即 msSaveBlob、saveAs）浏览器似乎暴露给工作线程。我花了一段时间在网上寻找可能性，但没有发现任何可用的； FileWriterSync 看起来不错，但只有 Chrome 支持，我还需要针对 IE 和 Firefox。

是否有我忽略的直接从网络工作者保存文件的方法？如果是这样，它是什么？还是我在这里运气不好？

Answer 1

tl;dr demo

您根本不需要将整个文件复制到客户端。事实上，你甚至不需要转移它。首先回顾一下。

这是从某个类型化数组创建Blob 的方法：

// Some arbitrary binary data
const mydata = new Uint16Array([1,2,3,4,5]);
// mydata vs. mydata.buffer does not seem to make any difference
const blob = new Blob([mydata], {type: "octet/stream"});

您可以创建一个对象 URL，它是由浏览器管理的原始 Blob 的副本，可作为 URL 访问。我已经对大型文件进行了此操作，但没有看到性能影响：

const url = URL.createObjectURL(blob);

这是我通常下载 URL 的方式：

const link = document.createElement("a");
link.download = "data.bin";
link.href = e.data.link;
link.appendChild(new Text("Download data"));
link.addEventListener("click", function() {
    this.parentNode.removeChild(this);
    // remember to free the object url, but wait until the download is handled
    setTimeout(()=>{URL.revokeObjectURL(e.data.link);}, 500)
});
document.body.appendChild(link);

您可以通过在该链接上调用click 事件来自动触发下载。我更喜欢让用户决定何时下载。

所以，一起来：

worker.js

// Some arbitrary binary data
const mydata = new Uint16Array([1,2,3,4,5]);

self.onmessage = function(e) {
  console.log("Message: ",e.data)
  switch(e.data.name) {
    case "make-download" : 
        const blob = new Blob([mydata.buffer], {type: "octet/stream"});
        const url = URL.createObjectURL(blob);
        self.postMessage({name:"download-link", link:url});
    break;
    default:
      console.error("Unknown message:", e.data.name);
  }
}

main.js

var worker = new Worker("worker.js");
worker.addEventListener("message", function(e) {
  switch(e.data.name) {
    case "download-link" : {
       if(e.data.error) {
          console.error("Download error: ", e.data.error);
       }
       else {
          const link = document.createElement("a");
          link.download = "data.bin";
          link.href = e.data.link;
          link.appendChild(new Text("Download data"));
          link.addEventListener("click", function() {
              this.parentNode.removeChild(this);
              // remember to free the object url, but wait until the download is handled
              setTimeout(()=>{URL.revokeObjectURL(e.data.link);}, 500)
          });
          document.body.appendChild(link);
       }
       break;
    }
  default:
    console.error("Unknown message:", e.data.name);
  }
});

function requestDownload() {
  worker.postMessage({name:"make-download"});
}

当我在演示中单击“下载”时，我可以在我的 HEX 编辑器中看到：

看起来不错:)