Latest version of iOS Chrome not downloading blobs correctly (pdf)

1.9k views Asked by At

The below code samples works with:

  • Chrome Android
  • Chrom Windows
  • Safari iPhone
  • Safari Mac
  • Chrome Mac

Doesn't work with:

  • Chrome iPhone

Sample 1

var oReq = new XMLHttpRequest();
var URLToPDF = fileUrl;
oReq.open('GET', URLToPDF, true);
oReq.responseType = 'blob';
oReq.onload = function () {
  const file = new Blob([oReq.response], { type: 'application/pdf' });
  const fileURL = URL.createObjectURL(file);
  window.open(fileURL, '_blank');
};

Sample 2

Axios(fileUrl, {
  method: 'GET',
  responseType: 'blob', 
})
  .then((response) => {
    const file = new Blob([response.data], { type: 'application/pdf' });
    const fileURL = URL.createObjectURL(file);
    window.open(fileURL);
  })
  .catch((error) => {
    console.log(error);
  });

Sample 3

import { saveAs } from 'file-saver';

fetch(fileUrl, {
  method: 'get',
}).then((response) => response.blob())
  .then((blobContent) => {
    var blob = new Blob([blobContent], { type: 'application/pdf' });
    saveAs(blob, 'test.pdf');
  });
1

There are 1 answers

1
santsh B On

Facing similar issue with ios/chrome. As workaround tried with below solution.

      this.blobURL = URL.createObjectURL(
        new Blob([resp], {
          type: 'application/pdf;charset=utf-8;'
        })
      );
      const k = document.createElement('a');
      k.setAttribute('href', this.blobURL);
      k.setAttribute('target', '_blank');
      k.click();