使用 Safari 在本地下载 blob答案

【问题标题】：Download blobs locally using Safari使用 Safari 在本地下载 blob
【发布时间】：2012-10-09 14:18:24
【问题描述】：

我正在尝试寻找一种跨浏览器的方式在 HTML5 中本地存储数据。我在 Blob (see MDN) 中生成了一大块数据。现在我想将此 Blob 移动到实际的文件系统并保存在本地。我找到了以下方法来实现这一点；

使用<a download> 属性。这目前仅适用于 Chrome。
微软在 IE 10 中引入了一个 saveAs 函数来实现这一点。
在浏览器中打开 Blob URL 并以这种方式保存。

不过，这些似乎都不适用于 Safari。虽然（1）适用于 Chrome，（2）适用于 IE 和（3）适用于 Firefox，但没有人适用于 Safari 6。下载属性尚未实现，当尝试使用 URL 打开 blob 时，Safari 抱怨 URL 以 @ 开头987654325@ 不是有效的 URL。

有一个很好的脚本可以封装 (1) 和 (3)，称为 FileSaver.js，但使用最新的 Safari 版本时不起作用。

有没有办法以跨浏览器的方式在本地保存 Blob？

【问题讨论】：

我在 Safari 中遇到了同样的问题。并将 FileSaver.js 用于其他浏览器。我知道这个问题，你面临很久了。只想知道，解决了吗？

标签： javascript html safari

【解决方案1】：

FileSaver.js 最近更新了，它适用于 IE10、Safari5+ 等。

见：https://github.com/eligrey/FileSaver.js/#supported-browsers

【讨论】：

获取最新版本并使用它。涉及一些设置，例如正确设置内容类型。在尝试自己处理跨浏览器问题后，我在我的一个项目中使用了 FileSaver。
FileSaver.js demo 正在回退到 Safari 中的 data: 网址，就像我的回答一样。例如：data:text/plain;charset=UTF-8;base64,aGEgw6Agw6kgw7g=
好的，没错。它也不使用 fileAPI。所以自从 OP 以来它变得更好了，但对你来说还不够好。您可以贡献一些代码来添加功能caniuse.com/fileapi

【解决方案2】：

文件名很烂，但这在 Safari 8 中对我有用：

        window.open('data:attachment/csv;charset=utf-8,' + encodeURI(csvString));

更新：不再在 Safari 9.x 中工作

【讨论】：

【解决方案3】：

我想出的唯一解决方案是制作一个 data: url。对我来说，这看起来像：

window.open("data:image/svg+xml," + encodeURIComponent(currentSVGString));

【讨论】：

这在 Safari 10.1 中也适用于我：window.open('data:application/json;charset=utf-8,' + encodeURIComponent('{"hello":"world"}'), '_blank')。您甚至可以将其剪切并粘贴到浏览器控制台中，以在新选项卡中打开它。
@EricDobbs 似乎只是弹出并没有下载文件。有什么想法吗？
@denislexic，它也不再适合我了。我确信 Apple 认为这是一个安全修复程序。

【解决方案4】：

这里的数据是在js中进行http rest调用时来自response的数组缓冲区数据。这在 safari 中有效，但是文件名可能存在一些问题，因为它是无标题的。

var binary = '';
var bytes = new Uint8Array(data);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
}

var base64 = 'data:' + contentType + ';base64,' + window.btoa(binary);
var uri = encodeURI(base64);
var anchor = document.createElement('a');
document.body.appendChild(anchor);
anchor.href = uri;
anchor.download = fileName;
anchor.click();
document.body.removeChild(anchor);

【讨论】：

【解决方案5】：

你读过这篇文章吗？ http://updates.html5rocks.com/2012/06/Don-t-Build-Blobs-Construct-Them

关于http://caniuse.com/#search=blob，可以在 safari 中使用 blob。

您应该构建一个通过标准 http:// url 传递 blob 的 servlet，这样您就可以避免使用 blob: url。只需向该 url 发出请求并构建您的 blob。

之后，您可以将其保存在文件系统或本地存储中。

【讨论】：

创建 blob 不是问题，但是您无法使用 window.open() 打开它或下载它。 “构造一个 servlet”是什么意思？
他正在谈论将内容发送到服务器并使其响应 content-disposition:attachment 等。所以你毕竟是从服务器下载文件，往返。
这违背了目的。
过去就是这样。这实际上对服务器负载并没有那么糟糕，但它会浪费带宽并使用户等待更多。

【解决方案6】：

从 ~safari 10.1 开始支持下载属性，所以目前这是要走的路。

【讨论】：

【解决方案7】：

这是在 safari 上唯一对我有用的东西。

   var newWindow = window.open();
   const blobPDF = await renderMapPDF(); // Your async stuff goes here
   if (!newWindow) throw new Error('Window could not be opened.');
   newWindow.location = URL.createObjectURL(blobPDF);

【讨论】：