File not downloading with BLOB object in iphone chrome browser

Question

I am trying to download the pdf file from server (jsp) using ajax call ,I am getting data in Base 64 format from server ,then converting it into ArrayBuffer and then downloading it with blob object ,below code is working fine for every browser except chrome in iphones even in safari for iphones it is working fine,I don't know whats the issue any help regarding that will be really appreciated

function hello(id)
    {
    //alert(id);

    //alert(id);
    var ln="en";
                $.ajax({
                  type:'post',
                 url:'ajaxurl',
                  data:{lang:ln,num_srno:id},
                  success:function(data){
                  //alert(data);

                /*  var bytes = new Uint8Array(data); // pass your byte response to this constructor

    var blob=new Blob([bytes], {type: "application/pdf"});// change resultByte to bytes

    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="myFileName.pdf";
    link.click();*/
    var sampleArr = base64ToArrayBuffer(data);
    saveByteArray("Sample Report", sampleArr);

                      }

                    });
    }

    function base64ToArrayBuffer(base64) {
        var binaryString = window.atob(base64);
        var binaryLen = binaryString.length;
        var bytes = new Uint8Array(binaryLen);
        for (var i = 0; i < binaryLen; i++) {
           var ascii = binaryString.charCodeAt(i);
           bytes[i] = ascii;
        }
        return bytes;
     }
    function saveByteArray(reportName, byte) {
        var blob = new Blob([byte], {type: "application/pdf"});
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        //link.href=window.webkitURL.createObjectURL(blob);
        //a.download = file_path.substr(file_path.lastIndexOf('/') + 1);
        var fileName = reportName;
        link.download = fileName.substr(fileName.lastIndexOf('/') + 1);
        document.body.appendChild(link);
     link.click();
    document.body.removeChild(link);

    };

It is working in my Chrome. Remember that Chrome has auto-downloading. Can you check the logs? — Ricardo, Dec 10 '18 at 07:13
Its working on windows chrome ,osx( mac book ) chrome but not working on i-phone chrome browser. — , Dec 10 '18 at 08:07

score 4 · Answer 1 · answered Dec 13 '18 at 13:53

4

there are some issue on iOS's Chrome. In my case using FileReader() solved the problem:

var reader = new FileReader();
var out = new Blob([this.response], {type: 'application/pdf'});
reader.onload = function(e){
  window.location.href = reader.result;
}
reader.readAsDataURL(out);

answered Dec 13 '18 at 13:53

Mosè Raguzzini

15,399
1
31
43

1

its working for iphone chrome but not on any other browser :( – Dec 14 '18 at 05:45
6

How can we set the file name? – Chetan Oswal Feb 18 '20 at 12:52

score 3 · Accepted Answer · edited Jan 14 '20 at 14:32

Combining with Mose Answer's above ,you can detect the os type and set your code accordingly to download

function hello(id) {
  //alert(id);

  //alert(id);
  var ln = "en";
  $.ajax({
    type: "post",
    url: "ajaxurl",
    data: { lang: ln, num_srno: id },
    success: function(data) {
      //alert(data);

      /*  var bytes = new Uint8Array(data); // pass your byte response to this constructor

    var blob=new Blob([bytes], {type: "application/pdf"});// change resultByte to bytes

    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="myFileName.pdf";
    link.click();*/
      var sampleArr = base64ToArrayBuffer(data);
      saveByteArray("Sample Report", sampleArr);
    }
  });
}

function base64ToArrayBuffer(base64) {
  var binaryString = window.atob(base64);
  var binaryLen = binaryString.length;
  var bytes = new Uint8Array(binaryLen);
  for (var i = 0; i < binaryLen; i++) {
    var ascii = binaryString.charCodeAt(i);
    bytes[i] = ascii;
  }
  return bytes;
}

function getMobileOperatingSystem() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;

  // Windows Phone must come first because its UA also contains "Android"
  if (/windows phone/i.test(userAgent)) {
    return "Windows Phone";
  }

  if (/android/i.test(userAgent)) {
    return "Android";
  }

  // iOS detection from: http://stackoverflow.com/a/9039885/177710
  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
    return "iOS";
  }

  return "unknown";
}

I hope it helps.

File not downloading with BLOB object in iphone chrome browser

2 Answers2

Linked