Question

我知道SO上已存在许多与此类问题相关的问题，例如：

此问题非常适用于iOS 8.1.3上的Safari（移动版，iPad 2+）。我们有一个离线 AngularJS Web应用程序，使用 Application Cache 和 IndexedDB 来存储数据。一种数据是可以相对较大的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是一个包含两个属性的对象：

name：文件名;
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#，了解我所谈论的行为，其中 a 标签 href 更改为URL下载文件。

让我知道这是否适合您！

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

1 个答案: