How to Open Blob Url on Chrome iOS

How to open Blob URL on Chrome iOS

FileReader solved my 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);

How to download a blob file from Chrome iOS in Javascript?

After searching, this solution seems to works fine on ChromeiOS and Safari. I found it on this post How to open Blob URL on Chrome iOS. This solved my problem:

//isbContentType i.e. 'text/plain'
//isbFilename i.e. 'This is a title'
 var reader = new FileReader();
    reader.onload = function(e) {
       var bdata = btoa(reader.result);
       var datauri = 'data:' + isbContentType + ';base64,' + bdata;
       window.open(datauri);
       newWindow = setTimeout(function() {
           newWindow.document.title = isbFilename;
       }, 10);
    };
    reader.readAsBinaryString(iobBLOB);

I believed there was a way to download the blob file, but it wasn't. Thanks anyway

File not downloading with BLOB object in iphone chrome browser

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.

Open blob objectURL in Chrome

The cause is probably adblock extension (I had exactly the same problem).

How to display PDF (Blob) on iOS sent from my angularjs app

None of the solutions proposed above did work for me.

The main issue comes from URL that wasn't retrieved correctly in iOS. The following code do the correct work :

window.URL = window.URL || window.webkitURL;

Also even with this, it did not work on Chrome iOS, neither Opera iOS...so after digging the internet and inspired with the following questions :

• Blob createObjectURL download not working in Firefox (but works when debugging)
• How to open Blob URL on Chrome iOS
• Display blob (.pdf) in an angular app

... I finally ended up with the following code (working on all iOS browsers except FF on iOS) :

if (window.navigator.msSaveOrOpenBlob) { //IE 11+
  window.navigator.msSaveOrOpenBlob(blob, "my.pdf");
} else if (userAgent.match('FxiOS')) { //FF iOS
  alert("Cannot display on FF iOS");
}
} else if (userAgent.match('CriOS')) { //Chrome iOS
  var reader = new FileReader();
  reader.onloadend = function () { $window.open(reader.result);};
  reader.readAsDataURL(blob);
} else if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) { //Safari & Opera iOS
  var url = $window.URL.createObjectURL(blob);
  window.location.href = url;
}

---

Related Topics