Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

I'm working on download files (pdf, excel, txt, png) from iOS. iOS hasn't a file systems which is a problem for downloads. I create a code which download a blob file depending of the OS and the navigator if is required. It works nicely on desktop (lastest versions of Chrome and IE), Mobile Android (Chrome, native navigator) and iOS iPad2 (Safari).

Now, Chrome iOS supposed to be like Safari mobile, but the algorithm doesn't works, Chrome iOs download the file by opening in a new tab but the page is empty.

I create my own blob to create the downloadUrl.

This is a part of the download function .

    var URL = window.URL || window.webkitURL;
    var downloadUrl = URL.createObjectURL(iobBLOB);
    var newWindow = null;   

    if (typeof a.download === 'undefined') {
            var newWindow = null;
            newWindow = window.open(downloadUrl, '_blank');
            setTimeout(function() {
                newWindow.document.title = isbFilename;
            }, 10);
    }

More details

Debugging on iPad 2 and iPhone 4

Trying to download an excell, pdf, txt, and Png files.

The devices doesn't have file system.

Thanks for helping me... Tell me if you need more information it's my first question.

like image 344
Es Noguera Avatar asked Mar 18 '15 23:03

Es Noguera


Video Answer


2 Answers

We have a wordpress site, and on the callback to download a csv file we had to add the following for ipad/pod/phone specific download;

if(stristr($_SERVER['HTTP_USER_AGENT'], 'ipad') OR stristr($_SERVER['HTTP_USER_AGENT'], 'iphone') OR stristr($_SERVER['HTTP_USER_AGENT'], 'ipod')) {
      header("Content-Type: application/octet-stream");   
} else {
      header('Content-Type: application/vnd.ms-excel');   
}
like image 186
Bob Walker Avatar answered Sep 18 '22 05:09

Bob Walker


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

// var blob = new Blob([response.data], { type: "application/pdf" });
var fileURL = URL.createObjectURL(out);
var a = document.createElement('a');
a.href = fileURL;
a.target = '_blank';
a.download = 'lkn_' + id + '.pdf';
document.body.appendChild(a);
a.click();
like image 24
peri purnama notes Avatar answered Sep 20 '22 05:09

peri purnama notes