将客户端生成的响应作为下载进行流式传输,无需 Service Worker

2024-06-01

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

通常的方法是创建一个 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(使用前将#替换为@)

将客户端生成的响应作为下载进行流式传输,无需 Service Worker 的相关文章

  • Bootstrap 页脚不在底部

    我试图强制我的页脚位于网站底部 我不希望它在滚动时粘住 只是在向下滚动网页时出现在底部 目前 网页显示时页脚位于内容下方 我添加了这样的代码bottom 0 并发现它粘住了并且不适合我的网站 我还添加了这样的代码html body heig
  • 将新数据添加到 d3 Streamgraph 时的转换

    我使用d3绘制了一个与官方示例非常相似的流图http bl ocks org mbostock 4060954 http bl ocks org mbostock 4060954 唯一的区别是我如何用新数据更新它 我不仅想要垂直 y 值 过
  • 禁用拉斐尔论文上的浏览器上下文菜单

    我有一篇拉斐尔论文定义为R1 Raphael 0 0 800 600 我想在本文中禁用上下文菜单 以便我可以捕获鼠标右键单击事件 我没有这样的Raphael someDiv 800 600 禁用 div 的 oncontextmenu 属性
  • 有效 JSON 上的 Firefox JSON“格式不正确”错误

    我在 Firefox 中收到以下错误消息 Error not well formed Source File http school courses booking add php 1287657494723 Line 1 Column 1
  • 在java中将HTML转换为RTF?

    我需要将 HTML 转换为 RTF 我正在使用以下代码 private static String convertToRTF String htmlStr OutputStream os new ByteArrayOutputStream
  • 如何替换 CSS 表达式

    我有一个用于时间表条目的旧 ASP Web 应用程序 其中充满了 CSS 表达式 它们出现在 CSS 文件中 ApptPage position relative height expression Math max document bo
  • Javascript CORS 图像/画布操作

    我正在尝试从另一个已配置为允许 CORS 的域检索图像 并操纵像素 然后我想显示结果并能够操纵结果 我可以在我请求的图像上使用 getImageData 和 toDataURL 所以我知道服务器部分可以工作 但是 当我尝试将图像的 src
  • PHP、MySQL 验证故障且搜索不起作用?

    我创建了一个小的注册粘性表格 一切工作正常 但如果我输入任何错误的值 例如姓名中的数字 年龄中的字母甚至错误的电子邮件格式 那么数据仍然保存在数据库中 我无法找出验证问题 另外一个是搜索选项 每当我在搜索框中输入任何名字或姓氏时 它都应该显
  • 将jQueryUI datepicker附加到div(显示位置错误)

    我在输入上使用 jQueryUI datepicker 默认情况下 jQueryUI 会附加 ui datepicker div to the body该文件的 有问题的输入位于屏幕上的 弹出 div 中 这意味着该 div 之外的任何点击
  • 滚动条宽度:细在 Firefox 中不起作用

    我刚刚在 Firefox 67 中实现了新的 css 滚动条颜色和滚动条宽度 滚动条宽度不起作用 无论我将其设置为自动 细化还是无 它都会显示相同的宽度 我想要它薄 但它不薄 我是这样实现的 root scrollbar color rgb
  • 发送带有图像的嵌套 JSON

    我一直在尝试研究一种能够通过 Ajax 将嵌套 JSON 请求发送回服务器的方法 根据我的理解 我们主要用于向服务器发送图像或文件的 formdata 在这种情况下不起作用 因为 FormData 似乎不处理嵌套对象 这就是我需要发送的有效
  • 在 Bootstrap 选择器上使用 jQuery 取消选择选项

    我对一些 UI 元素使用 Bootstrap SelectPicker 它允许用户选择多个选项并将其呈现在段落标签中的屏幕上 他们还应该能够删除选定的选项 这是我的代码 用于将选定的选项渲染到屏幕上 以便每个选项旁边都会显示一个 X 单击它
  • LightningChart JS - LineSeries / Progressive X 的损坏

    我在使用 LightningChart 时遇到了一个有趣的问题 它似乎会破坏或以其他方式减少我的数据 具体取决于它与图表的 DateOrigin 的距离 我的数据是每秒 1000 个样本 我试图一次显示 1 2 周的数据 我正在使用 Cha
  • 持续运行的 C# 代码 - 服务还是单独的线程?

    我有一个 NET 4 Web 应用程序 它有 3 个关联的独立项目 DAL BAL 和 UI 我正在使用实体框架进行数据库交互 我有代码循环遍历一堆数据库数据 根据找到的内容调用方法 然后更新数据库 我希望这段代码一直运行 同时 我希望用户
  • 尝试将远程图像转换为 Base64 数据时出现 CORS 错误[重复]

    这个问题在这里已经有答案了 我需要将远程图像转换为给定其 URL 的 base64 但我遇到了 CORS 错误 并且不确定如何解决 我遵循了这个问题的一些解决方案 如何使用javascript将图像转换为base64字符串 https st
  • 如何使用 GWT 创建可点击的链接?

    我想与 GWT 建立一些可点击的链接 我不确定这是否是最佳实践 基本上我想要类似这样的东西 如果我用 html 编写的话 a href index html alt Link a Use a 超级链接 http google web too
  • 如何从索引文件迭代多个导入的模块

    我有一个名为Polygons我在那里创建了一个index jsfile 以导出目录中的所有文件 它看起来像这样 export default as europe from europe export default as northAmer
  • 在用户单击之前图像不会绘制在画布上?

    我使用执行类似以下操作的函数绘制几张图像 context drawImage img width 2 1 height 2 1 width height 我读过 我需要等待图像加载后才能绘制它 如下所示 img onload functio
  • 如何使用 jQuery 解析 JavaScript 对象

    jQuery JavaScript 中用于解析 JSON 对象并返回键 值对的 foreach 等效项是什么 JSON 对象 是什么意思 JSON 是一种用于序列化对象的文本格式 如果要循环访问通过反序列化 JSON 字符串获得的对象中的属
  • 如何在网页上显示进度条直到网页完全加载?

    我想在网页中显示进度条 加载弹出窗口 直到页面完全加载 我的网页很重 因为它包含一个 HTML 编辑器 这是一个基于 jQuery 的 HTML 编辑器 需要很多时间才能完全加载 在加载时 我希望在页面上显示一个进度条 该进度条将在整个页面

随机推荐