1

假设我有一个在客户端生成的大文件，我希望允许用户将其保存到他们的硬盘上。

通常的方法是创建一个 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 状态。工人可以随时被杀死，并且不能保证通过消息传递使其保持活力。所有这些 hack 都在这里的一个优秀项目中实现： https ://github.com/jimmywarting/StreamSaver.js 但是，归根结底，由于这些浏览器的限制，它是不可靠的。

是否存在用于在不使用服务工作者的情况下流式传输“下载”客户端的适当 API？

4

1 回答 1

2

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

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

};

这是一个现场故障项目。

于 2020-07-14T03:18:42.287 回答