javascript - 将客户端生成的响应作为下载流式传输，无需服务 worker

Question

假设我在客户端生成了一个大文件，我想让用户将其保存到他们的硬盘上。

通常的方法是创建一个 Blob，然后为它创建一个对象 URL:

const blob = new Blob([chunks], {type: 'application/example'});
linkEl.href = URL.createObjectUrl(blob);

这可行，但效率不高，因为它会很快耗尽所有可用内存，因为生成的文件必须保留在内存中。

更好的方法是启用流式传输。像这样:

const outputStream = new WritableStream();
linkEl.href = URL.createObjectUrl(outputStream);
while (let chunk = await getChunk()) {
  outputStream.write();
}
outputStream.end();

今天有直接的方法吗？

我见过的像这样进行流式传输的唯一方法是使用 Service Worker。不幸的是，在许多情况下，Service Worker 是不可用的。隐私模式可能会绕过所有服务 worker 。硬刷新页面会禁用它们。打开浏览器工具可以重置 Service Worker 状态。 worker 可以随时被杀死，并且不能保证通过消息传递保持它的存活。所有这些 hack 都已在此处的一个优秀项目中实现:https://github.com/jimmywarting/StreamSaver.js但是，归根结底，由于这些浏览器限制，它并不可靠。

是否存在适当的 API 来在不使用 service worker 的情况下流式传输“下载”客户端？

Answer 1

有一个正在定义... File System Access .

它仍然是一个早期的草案，只有 Chrome 实现了它。

您会对 FileSystemWritableFileStream 特别感兴趣在用户选择您可以弄乱他们的数据的位置后，该界面将允许在磁盘上写入 ;-)

非实时代码，因为 “沙盒文档不允许显示文件选择器。”...

onclick = async () => {

if( !("showSaveFilePicker" in self) ) {
  throw new Error( "unsupported browser" );
}

const handle = await showSaveFilePicker();
const filestream = await handle.createWritable();
const writer = await filestream.getWriter();
// here we have a WritableStream, with direct access to the user's disk
await writer.write( "hello" );
await writer.write( " world" );
writer.close();

};

这是一个live glitch poject .