在iOS Safari中使用XHR下载文件

Question

我正在尝试添加下载服务器上文件的功能。要访问文件，我必须发送 Authorization 标头，因此必须发送 XHR 请求以从服务器获取文件。由于文件内容存储在变量中，所以必须创建数据 URL，使其可用作锚标签的 href 属性，并通过编程方式点击它以下载文件。这在几乎所有浏览器中都能正常工作（除了 IE11，我已经为其编写了单独的代码），但在某些 iOS Safari 版本中会出现错误。以下是我正在使用的代码 -

var isBrowserIE = window.navigator && window.navigator.msSaveOrOpenBlob;
var dataHref = 'https://example.com/doc.pdf';
var xhr = new XMLHttpRequest();
xhr.open('GET', dataHref, true);
xhr.setRequestHeader('Content-Type', 'application/pdf');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.responseType = isBrowserIE ? 'blob' : 'arraybuffer';
xhr.onload = function (e) {
    if (this.status == 200) {
        //For IE11
        if (isBrowserIE) {
            // Create a new Blob object using the response data of the onload object
            var blob = new Blob([this.response], { type: 'application/pdf' });

            var bool = window.navigator.msSaveOrOpenBlob(blob, docName);
            if (!bool) {
                alert("Download failed, Please try again later");
            }
        } else {
            var uInt8Array = new Uint8Array(this.response);
            var i = uInt8Array.length;
            var binaryString = new Array(i);
            while (i--) {
                binaryString[i] = String.fromCharCode(uInt8Array[i]);
            }
            var data = binaryString.join('');

            var base64 = window.btoa(data);

            var dataUrl = 'data:application/octet-stream;charset=utf-16le;base64,' + base64;
            var element = document.createElement('a');
            element.setAttribute('href', dataUrl);
            element.setAttribute('download', 'doc.pdf');
            element.style.display = 'none';
            document.body.appendChild(element);
            element.click();
            document.body.removeChild(element);
        }
    } else {
        alert("Download failed, Please try again later");
        closeWindow();
    }
};

xhr.send();

这是我遇到的可能相关的错误-

Safari 无法打开页面.<br><br>错误为：“数据URL解码失败”。

我是否忽略了任何可能引起该错误的原因？该错误仅在iPad 4和iPad 5上发生，但在iPad mini和iPhone XR上工作正常。不确定为什么在某些iOS设备版本上可以运行而在其他版本上却不能。

- 0xC0DED00D

Answer 1

我终于想通了。这是我的最终代码，并在注释中进行了解释（很抱歉，因为需要支持IE11，所以这里使用ES5代码，当前项目还没有使用babel）-

/* exported DownloadHandler */
/* global Uint8Array*/
var DownloadHandler = (function() {
  function isMobileDevice() {
    return navigator.userAgent.match(/Android|iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile/i);
  }
  function isChromeBrowser() {
    return navigator.userAgent.match(/Crios|Chrome/i);
  }
  function isIEBrowser() {
    return window.navigator && window.navigator.msSaveOrOpenBlob;
  }
  function isSafariBrowser() {
    return navigator.userAgent.match(/Safari/i);
  }
  function getResponseType() {
    // Both Desktop Chrome and IE supports blob properly
    // Chrome also supports Data URI way, but it fails miserably when the file size is more than 2 MB (Not sure about the exact limit though).
    if (isIEBrowser() || isChromeBrowser()) {
      return 'blob';
    } else if (isMobileDevice()) {
      return 'arraybuffer';
    }
    return 'blob';
  }
  function getBlobUriFromResponse(response) {
    var blob = new Blob([response], { type: 'application/pdf' });
    var downloadUrl = URL.createObjectURL(blob);
    return downloadUrl;
  }

  function getDataUriFromResponse(response) {
    var uInt8Array = new Uint8Array(response);
    var i = uInt8Array.length;
    var binaryString = new Array(i);
    while (i--) {
      binaryString[i] = String.fromCharCode(uInt8Array[i]);
    }
    var data = binaryString.join('');

    var base64 = window.btoa(data);

    var dataUrl = 'data:application/octet-stream;charset=utf-16le;base64,' + base64;
    return dataUrl;
  }
  function downloadFileUsingXHR(fileName, fileUrl, fileMimeType, requestType, headersList) {
    var xhr = new XMLHttpRequest();
    xhr.open(requestType, fileUrl, true);
    xhr.setRequestHeader('Content-Type', fileMimeType);
    for (var i = 0; i < headersList.length; i++) {
      var header = headersList[i];
      xhr.setRequestHeader(header.key, header.value);
    }
    xhr.responseType = getResponseType();
    xhr.onload = function() {
      if (this.status == 200) {
        //For IE11
        //IE uses blob with vendor specific code
        if (isIEBrowser()) {
          // Create a new Blob object using the response data of the onload object
          var blob = new Blob([this.response], { type: fileMimeType });

          var bool = window.navigator.msSaveOrOpenBlob(blob, fileName);
          if (!bool) {
            alert('Download failed, Please try again later');
          }
        } else {
          var dataUrl;
          if (this.responseType === 'blob') {
            dataUrl = getBlobUriFromResponse(this.response);
          } else {
            dataUrl = getDataUriFromResponse(this.response);
          }
          var element = document.createElement('a');
          // Safari doesn't work well with blank targets
          if (!isSafariBrowser()) {
            element.setAttribute('target', '_blank');
          }
          element.setAttribute('href', dataUrl);
          element.setAttribute('download', fileName);
          element.style.display = 'none';
          document.body.appendChild(element);
          element.click();
          document.body.removeChild(element);
        }
      } else {
        alert('Download failed, Please try again later');
      }
    };

    xhr.send();
  }
  return {
    downloadFileUsingXHR: downloadFileUsingXHR
  };
})();

以下是如何使用上述代码的方法：

DownloadHandler.downloadFileUsingXHR('example.pdf', 'https://example.com/doc.pdf', 'application/pdf','GET',[{key:'Authorization',value:'Bearer ' + token}]);

我可能会稍后将其转换成一个库，并在此处发布链接。我将有机会进一步完善代码。

- 0xC0DED00D