Retrieve a document utilizing XHR on iOS Safari platform

Question

Retrieve a document utilizing XHR on iOS Safari platform

I'm currently working on adding the capability to download a file stored on a server. To access the file, I need to include the Authorization header, requiring me to send an XHR request to retrieve the file from the server. Since the file content is stored in a variable, I have to create a data URL to set it as the href attribute of an anchor tag and simulate a click event to initiate the file download programmatically. The functionality works well in most browsers (with a separate code for IE11), but I am encountering errors specifically in iOS Safari versions. Below is the code snippet I am using -


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) {
            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();

The error I'm facing is related to Safari and reads -

Safari cannot open the page.<br><br>The error was: “Data URL decoding&nbsp;failed”.

I'm unsure what may be causing this error. It seems to only occur on iPad 4 and iPad 5, while still working on iPad mini and iPhone XR devices. The inconsistency across different iOS versions is puzzling.

javascript ios safari data-uri

Answer 1

Answer №1

After much deliberation, I've finally cracked the code! Below is my finalized script along with detailed explanations in the comments section (Apologies for sticking to ES5 code as the project doesn't use Babel and has to support IE11) -

/* 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
  };
})();

Now, here's how you can implement the aforementioned code:

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

In the future, I might convert this into a library and provide a link for easy access. This will also give me an opportunity to refine the code further.

Answer 2

After much deliberation, I've finally cracked the code! Below is my finalized script along with detailed explanations in the comments section (Apologies for sticking to ES5 code as the project doesn't use Babel and has to support IE11) -

/* 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
  };
})();

Now, here's how you can implement the aforementioned code:

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

In the future, I might convert this into a library and provide a link for easy access. This will also give me an opportunity to refine the code further.

Retrieve a document utilizing XHR on iOS Safari platform

Answer №1

Similar questions

Should we define all public methods or prototype each method separately?

What benefits does using Object.create(null) offer in comparison to utilizing a Map?

Can you build and run a production-ready Vue application on your local system?

Does the Error page in Next JS 13 fail to properly manage fetch API errors?

Is it possible that Typescript does not use type-guard to check for undefined when verifying the truthiness of a variable?

Having received a status code of 200 in Flask WebApp, I am still unable to access the page

Determine the employees' salaries and display any salaries that are below 5000

Obtain array buffer from NodeJS to capture frames from a video file

Which codec strings are considered valid for the web codecs API?

Arranging numerous Text elements within a solitary Drag and Drop container with the z-index property

React's Conditional Rendering

Creating Pop-up Dialog Boxes in WebForms Using jQuery

Combining Protractor, CucumberJS, and Gulp-Protractor results in the browser not closing when a test fails

Tips for assigning unique names to each radio input groupNeed to assign unique names to radio

Executing a function in AngularJS using PHP

Trouble with $http response not appearing in AngularJS application

Is there a way to adjust the state value in Pinia within a Vue3 component test, and have an impact on the component?

Instructions on creating an input field and a slider simultaneously

What is the method for accessing cookies using JSONP?

Sending arguments to browser.executeScript