Generate Download Content From Data Url with Javascript and HTML 5

Question

I am developing a WebRTC application that transfers file over WebRTC data channel. After I successfully transfer the file as data url, I want to create a link says "Click to download" from that data url.

I have used HTML 5 <a> tag with download attribute to create that content. An examplary content as follows;

<a download="fileName" href="data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,UEsDBBQABgAIAAA...sc1BLBQYAAAAAGQAZAKoGAAD9eQAAAAA=">

It worked just fine for small contents that lesser than 16MB or so, but for bigger contents, it just didn't worked and nothing happened when you click.

Then I tried to open new page with data url as follows;

// event.message.content is base 64 data url
window.open(event.message.content,'Downloading');

This solution also worked for small contents, but failed to download big contents.

How could I download big content by using Javascript(pure javascript if possible) and HTML 5? ~~Is there any more efficent way than base64?~~ Thanks to CBroe, now I know that base64 is not the efficent way. What would be the efficent way to do this?

Please feel free to ask for details if any missing.

Thanks, Ugurcan

Edit: I've tried following code snippet, it worked for small content but not worked for bigger content too. It is probably same thing with the first one.

var save = document.createElement('a'),
    event;
save.href = message.content;
save.target = '_blank';
save.download = message.identifier;

event = document.createEvent('Event');
event.initEvent('click', true, true);

save.dispatchEvent(event);
(window.URL || window.webkitURL).revokeObjectURL(save.href);

Browsers limit the size of URLs, see http://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers — CBroe, Jan 19 '16 at 13:27
Thank you, now I know that I should use something other than data url. — Uğurcan Şengit, Jan 19 '16 at 13:39
[This answer](http://stackoverflow.com/a/5100158/1400515) solved my problem. — Uğurcan Şengit, Jan 22 '16 at 08:54
Glad to hear – but _how_? As far as I can see, this answer is about _uploading_ data via a form, not downloading it to the client …? — CBroe, Jan 22 '16 at 09:06

Uğurcan Şengit · Answer 1 · 2021-02-04T13:31:20.017

Following code snippet derived from this answer helped me to get Blob from base64 data uri.

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {
        type: mimeString
    });
}

Then I wrote this code snippet in order to download Blob content

var blob = dataURItoBlob(message.content);

var blobUrl = URL.createObjectURL(blob);

var save = document.createElement('a'),
    event;
save.href = blobUrl;
save.download = message.identifier;

event = document.createEvent('Event');
event.initEvent('click', true, true);

save.dispatchEvent(event);
(window.URL || window.webkitURL).revokeObjectURL(save.href);

Thanks for your kind help folks.

Generate Download Content From Data Url with Javascript and HTML 5

1 Answers1