假设我有一个在客户端生成的大文件,我希望允许用户将其保存到他们的硬盘驱动器上。
通常的方法是创建一个 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 https://github.com/jimmywarting/StreamSaver.js但是,归根结底,由于这些浏览器的限制,它是不可靠的。
是否存在适当的 API 可以在不使用 Service Worker 的情况下流式传输“下载”客户端?
有一个被定义... 文件系统访问 https://wicg.github.io/file-system-access/.
它仍然是一个早期草案,只有 Chrome 实现了它。
您会对以下内容特别感兴趣文件系统可写文件流 https://wicg.github.io/native-file-system/#api-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();
};
这里有一个实时故障项目 https://nativefs-streamo-disk.glitch.me/.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)