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

Question

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.

you can use my download script to download blobs: https://github.com/rndme/download download(iobBLOB, "file.ext", "text/plain") — dandavis, Mar 18 '15 at 23:20
I've done blob downloads by using an anchor. Create an anchor, set the `href`to the ObjectURL data, set the `download` to the filename, and trigger a `click()`. Might help? — Malk, Mar 18 '15 at 23:21
@dandavis Thanks dan, but your code does't work on devices without file systems — Es Noguera, Mar 20 '15 at 13:57
i've tested on ipads... i think you need iOS7.1+ for it, so you may need to update the iPad. (just a guess) — dandavis, Mar 20 '15 at 17:14
Could you write the code that download from Chrome in an iPad for me please? I'm implementing **download.min.js** but it doesn't works on my device. I've just update de iPad to iOS 8.2 — Es Noguera, Mar 25 '15 at 17:27

score 3 · Accepted Answer · edited Mar 23 '22 at 06:26

3

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

edited Mar 23 '22 at 06:26

Ferran Buireu

28,630
6
39
67

answered Mar 26 '15 at 20:43

Es Noguera

426
1
5
19

1

What's `isbContentType`? `isbFilename`? Please provide a more detailed explanation for your solution. – d0st Apr 26 '21 at 08:15
isbContentType is the file type, i.e. 'text/plain'. isbFilename is the name of the file i.e. 'Journey into the wild' – Es Noguera May 28 '21 at 19:35

score 2 · Answer 2 · edited Aug 30 '20 at 10:14

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

score 0 · Answer 3 · edited Jan 11 '20 at 00:18

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

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

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

More details

3 Answers3