Safari/iOS 中“下载”属性的替代方案答案

【问题标题】：Alternative for 'download' attribute in Safari/iOSSafari/iOS 中“下载”属性的替代方案
【发布时间】：2019-09-09 15:01:10
【问题描述】：

我有一个使用 base64 创建的 blob，我需要将此数据以 pdf 格式下载。

我创建了这个 sn-p：

    var blob = new Blob([byte]);
    var link = document.createElement('a');

    link.href = window.URL.createObjectURL(blob);
    link.target = '_blank';
    var fileName = name + '.pdf';
    link.download = fileName;
    link.click();

它适用于所有浏览器，iOS 上的 safari mobile 除外。

该文件被实际下载，但它的名称是“未知”，然后它无法打开，因为扩展丢失。

问题是download attribute缺乏对这个浏览器和IE的支持。

IE 有很多解决方法，但我没有找到任何适用于 Safari/iOS 的解决方法。

您知道如何在此浏览器中下载从 base64（不涉及 XHR）获取的 blob？

谢谢

【问题讨论】：

我不确定您的问题是否是 github.com/keeweb/keeweb/issues/130 描述的问题另一个建议：回到过去，当 CGI and perl 仍然存在时，我通过添加各种不同的标题解决了类似的问题http response header 中的行。您可能必须为此使用较低级别的 JS 库。此外，您需要查看 Safari 真正解释了哪些标头，可能是 content-disposition。
这个问题没有得到足够的重视，感谢@GerardoFurtado 的赏金。一周后，我会自信地说，这个浏览器不存在任何特定的解决方法，而且最奇怪和最深奥的解决方案也不会提供任何令人满意的结果。关于我的具体案例，我向营销部门解释了这个问题，我们选择在新选项卡中查看该文件。也就是说，如果我们匹配 safari/IOS 浏览器，采用的方案如下：window.open('data:application/pdf;base64,'+escape(base64), '_blank');

标签： javascript html ios download safari

【解决方案1】：

我需要在 Safari iOS 中将此数据以 pdf (...) 格式下载

简短回答：你不能。由于这个bug 无法在 Safari iOS 上下载文件

另一种方法是在浏览器上使用正确的 mime 类型打开文件，这样它就可以显示其内容（然后用户可以在需要时手动下载它）。

确保在创建 Blob 时传递 mime 类型。 reference

var blob = new Blob([byte], {type: 'application/pdf'});

最后，我强烈建议您使用FileSaver.js，它可以处理大多数极端情况/多个浏览器支持在 javascript 中保存（或在这种情况下打开）文件。

【讨论】：

FileSaver 不是一个选项。来自文档：Due to restrictions in iOS saveAs opens in a new window instead of downloading.
@GerardoFurtado，这正是我的观点：目前，由于存在错误，无法在 Safari iOS 上下载文件。修复错误后，可能 FileSaver.js 将能够相应地处理此问题。目前，最好的办法是在新窗口中打开文件（用户可以手动下载）
在这种情况下，您的答案（以及所有其他人，顺便说一句）应该只是评论。
@GerardoFurtado 我再次更新了答案以使其更加清晰。不过，不知道为什么你认为它应该是一个评论。根据我对meta.stackoverflow.com/questions/366515/…的解释，这是一个很好的答案。
@DiogoSgrillo 您提到的错误在 iOS 13 中标记为 Fixed Resolved。这仍然不可能吗？

【解决方案2】：

根据以下链接：-

https://caniuse.com/#feat=download

Safari 13 Beta 3 已发布，您可以检查它是否正常工作？

您可以使用 atob 函数下载从 base64 获取的 blob。

atob 函数会将 base64 编码的字符串解码为新字符串，二进制数据的每个字节都有一个字符。

您可以通过 FileSaver.js 在本地保存 blob。

您也可以在这里查看，这会有所帮助：- How to open Blob URL on Chrome iOS

【讨论】：

您在回答中提到的 Safari 是 MacOS Safari，而不是 iOS Safari。此外，正如他们的文档所说，FileSaver 不允许在 iOS 中下载。
@GerardoFurtado 你是在说 FileSaver.js 吗？
不，我正在讨论 Safari。在撰写本文时，还没有适用于 iOS 的 Safari 13。你又开始谈论 MacOS 了。
@GerardoFurtado 请查看其发布的developer.apple.com/documentation/safari_release_notes/…

【解决方案3】：

Safari 中的“目标”属性似乎覆盖了“下载”属性。目前，据我所知，没有办法解决这个问题。所以我认为你必须等待下一个 Safari 版本 (13)，它将在几个月后发布。

【讨论】：

这个答案是完全错误的。移动版 Safari 中的锚元素没有 download 属性，如果您尝试，它只是 undefined。因此，没有什么可以被覆盖。