如何使用移动Safari下载客户端数据？

Question

我知道SO上已经存在很多与此类问题相关的问题,例如:

• 在内存中创建一个文件供用户下载,而不是通过服务器
• 使用HTML5/Javascript生成并保存文件
• 数据协议URL大小限制
• 使用文件名保存文件Javascript
• 在JavaScript中从base64字符串创建Blob
• 无法在'Window'上执行'atob'

这个问题非常适用于iOS 8.1.3上的Safari(移动版,iPad 2+).我们有一个使用Application Cache和IndexedDB的离线AngularJS Web应用程序来存储数据.一种数据是可以相对较大的PDF文档:最大约25兆字节.我们将这些文件存储在IndexedDB中,当用户想要下载它时,我们在浏览器中使用JavaScript将该文件存储在内存中.

当用户想要保存它时,问题就出现了.Safari Mobile可能会因数据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:文件的数据,基本64编码,然后我们将其转换为二进制.

该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);
};

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#了解我正在讨论的行为，其中tag href更改为下载文件的 URL。

让我知道这是否适合您！