如何将 Blob 写入本地文件？ [复制]

Posted 2023-05-07

【中文标题】如何将 Blob 写入本地文件？ [复制]

【英文标题】：How to write Blob to a local file? [duplicate]

【发布时间】：2014-07-20 02:45:03

【问题描述】：

我读过好文章 http://www.html5rocks.com/en/tutorials/file/xhr2/

它使用HTML5 FileSystem API和FileWriter来实现将Blob写入本地文件。

但是，我的浏览器 Safari（当前为 7.0.5）不支持 requestFileSystem 和 FileWriter。 （我用 Chrome 测试过。它也不支持。）

我也在网上搜索过，但似乎没有“正式答案”之类的东西。

另一个问题是为什么将本地文件读取到浏览器很简单（使用FileReader），但写入本地文件似乎不是对称的，尤其是在新的 html5 标准中。

【问题讨论】：

写入本地文件会带来更多潜在的安全风险，此外它还有更新的 API。但是，强制下载始终有效。

【参考方案1】：

在 webkit（Chrome 和 Safari）中，您实际上可以通过供应商前缀使用 FileSystem api：

window.webkitRequestFileSystem

而且FileWriter 无论如何也不会直接暴露给 javascript。

对于不支持的浏览器（很多）：https://github.com/eligrey/FileSaver.js 会有所帮助。

---

您是否考虑过以老式方式强制下载（更多兼容性）？将 Blob 读取为数据 URI，然后将 URI 的内容类型更改为强制下载的值。缺点：不指定文件名，繁琐。

var reader = new FileReader;
reader.onload = function() 
    window.open(this.result.replace(/data:.+?\/[^;]+/, "data:application/octet-stream"));
;
reader.readAsDataURL(my_blob);

【讨论】：

我试过 FileSaver.js 并没有像 <input type="file"/> 那样显示对话框。我有什么误解吗？还是依赖于平台？ （我的是 Mac OS/Safari）

顺便说一句，我在本地文件系统中也找不到输出文件。

@RedBeanPieLarry：该​​文件将位于您的下载文件夹中（或者根据您的浏览器设置，系统会提示您将其保存在哪里）。而且没有办法显示文件保存对话框，除非您的浏览器本机支持 API 或其设置导致它询问您在哪里保存下载。