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

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 是不可用的。隐私模式可能会绕过所有服务工作者。硬刷新页面会禁用它们。打开浏览器工具可以重置 Service Worker 状态。 worker 可以随时被杀死，并且不能保证通过消息传递保持它的存活。所有这些 hack 都已在此处的一个优秀项目中实现：https://github.com/jimmywarting/StreamSaver.js 但是，归根结底，由于这些浏览器的限制，它并不可靠。

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

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.

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

Streaming a client-side generated response as a download, without service worker

javascript

html

whatwg-streams-api