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

    };

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

    };

• javascript
• jquery
• ios
• google-chrome
• blob

• 1 It is working in my Chrome. Remember that Chrome has auto-downloading. Can you check the logs? – Ricardo Commented Dec 10, 2018 at 7:13
• Its working on windows chrome ,osx( mac book ) chrome but not working on i-phone chrome browser. – user10127693 Commented Dec 10, 2018 at 8:07

2 Answers 2

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

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 e 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./a/9039885/177710
  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
    return "iOS";
  }

  return "unknown";
}

I hope it helps.