如何在移动Safari上通过客户端下载数据？

Question

我知道在SO上已经有很多与这种问题相关的问题，例如：

• 创建内存中的文件供用户下载，而不是通过服务器
• 使用HTML5 / JavaScript生成和保存文件
• Data协议URL大小限制
• 使用文件名保存JavaScript文件
• 在JavaScript中从base64字符串创建Blob
• 在“窗口”上执行'atob'失败

这个问题非常特定于iOS 8.1.3（Mobile，iPad 2+）上的Safari。我们有一个离线的AngularJS web应用程序，使用Application Cache和IndexedDB存储数据。一种数据是PDF文档，可以相对较大：最大约为25兆字节。我们将这些文件存储在IndexedDB中，当用户想要下载它时，我们使用JavaScript在浏览器中将这个文件保存在内存中。

问题实际上出现在用户想要保存它时。Safari移动版可能会因为Data URI的大小限制或其他原因而崩溃。

this.save = function (file) {
    var mediaType = "application/pdf";

    var link = document.createElement("a");
    var blob = new Blob([this.fromBase64ToBinary(file.content)], { type: mediaType });

    var blobUrl = URL.createObjectURL(blob);
    document.body.appendChild(link);
    link.download = file.name;
    link.href = blobUrl;
    link.click();
    document.body.removeChild(link);
};

我们有一个服务，其中有一个函数save(file)，其中file是一个包含两个属性的对象：

1. name：文件名；
2. content：文件数据，其为base64编码，然后我们将其转换为二进制。

atob()函数可能会导致问题吗？当我在运行这段代码的iPad上逐步调试时，它就崩溃了（即：带有var byteCharacters = atob(b64Data);行的位置）。

this.fromBase64ToBinary = function (base64) {
    var byteCharacters = atob(base64);
    var byteNumbers = new Array(byteCharacters.length);
    for (var i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }

    return new Uint8Array(byteNumbers);
};

- sgy

---

请查看此问题和答案。因为在iOS中，如果存在空格字符，使用atob会导致程序崩溃。 - ykaragol

为什么需要使用base64？我问这个问题是因为当你使用它时，文件会变得比原来大37%。大致上，Base64编码二进制数据的最终大小约为原始数据大小的1.37倍。 来源：http://en.wikipedia.org/wiki/Base64 - Marco

我有一个问题，它是针对所有文件大小还是特定文件大小而中断的？ - VariableVasasMT

根据@ykaragol的评论，一个base64编码的字符串中会有空格吗？https://dev59.com/lHA75IYBdhLWcg3w0cjx - VariableVasasMT

@Marco，你的问题答案在ykaragol的评论中。 - VariableVasasMT

Answer 1

我遇到过类似的问题。我解决它的方式是这样的：

// Detects if Safari 9 or less
var isSafariNineOrLess = navigator.vendor && navigator.vendor.indexOf('Apple') 
> -1 &&
navigator.userAgent &&
navigator.userAgent.indexOf('CriOS') === -1 &&
navigator.userAgent.indexOf('FxiOS') === -1 &&
window.ApplePaySession === undefined;

...

if(!isSafariNineOrLess) {
    save(file);
}
else {
   var myLink = document.getElementById('myLink');
       if(myLink) {
          myLink.removeAttribute('href');
          myLink.setAttribute('href', 'http://example.com/download.pdf.zip');
        }
 }

当用户点击链接时，他们可以下载一个包含PDF文件的压缩文件。您似乎正在使用https://github.com/eligrey/FileSaver.js或类似的工具，但这在Safari 9及以下版本中绝对无法使用。

请在Safari 9或更低版本中查看https://visualstudio.microsoft.com/thank-you-downloading-visual-studio-mac/?sku=communitymac&rel=16#，了解我所说的行为，其中a标签的href被更改为下载文件的URL。

如果这对您有用，请告诉我！

- risingPhoenix1979