file - 是否可以直接从网络 worker 保存文件？

Question

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

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

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

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

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"});
}

当我在我的演示中单击下载时，我可以在我的十六进制编辑器中看到这个:



看起来不错:)