将客户端生成的响应作为下载进行流式传输，无需 Service 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 不可用。隐私模式可能会绕过所有服务工作线程。硬刷新页面会禁用它们。打开浏览器工具可以重置 Service Worker 状态。工作人员随时可能被杀死，并且尝试通过消息传递使其保持活动状态并不能保证有效。所有这些黑客都已在此处的一个优秀项目中实现： https://github.com/jimmywarting/StreamSaver.js 但是，归根结底，由于这些浏览器限制，它是不可靠的。

是否存在适当的 API 可以在不使用 Service Worker 的情况下流式传输“下载”客户端？

Answer 1

正在定义一个...文件系统访问。

它仍然是一个早期草案，只有 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();

};

这是一个实时故障项目。