Saving binary data as file using JavaScript from a browser

javascript html blob
Ravi Mittal picture Ravi Mittal · May 4, 2014 · Viewed 131.9k times · Source

I am working on a business application using angularJS. One of my service method returning me a byte[] (inclding PDF file content) now i need to download this file as PDF to client machine using JavaScript.

How is that possible using HTML5 Apis or any JavaScript API?

I have used window.atob(base64String)

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IDQ1MiAzOTUgMzE0IDQ2MCAzMTQgNDk4IDUwNiA1MDYgDTUwNiA1MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiANNTA2IDUwNiA1MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiA1MDYgMjI2IA0zMjUgNDk4IDUwNiA0OTggNTA2IDQ5OCA0OTggMzkyIDgzNCA0MDIgNTEyIDQ5OCAzMDYgNTA2IDM5NCAzMzggDTQ5OCAzMzUgMzM0IDI5MSA1NDkgNTg1IDI1MiAzMDcgMjQ2IDQyMiA1MTIgNjM2IDY3MSA2NzUgNDYzIDU3OCANNTc4IDU3OCA1NzggNTc4IDU3OCA3NjMgNTMzIDQ4OCA0ODggNDg4IDQ4OCAyNTEgMjUxIDI1MSAyNTEgNjI0IA02NDUgNjYyIDY2MiA2NjIgNjYyIDY2MiA0OTggNjYzIDY0MSA2NDEgNjQxIDY0MSA0ODcgNTE2IDUyNyA0NzkgDTQ3OSA0NzkgNDc5IDQ3OSA0NzkgNzcyIDQyMiA0OTcgNDk3IDQ5NyA0OTcgMjI5IDIyOSAyMjkgMjI5IDUyNSANNTI1IDUyNyA1MjcgNTI3IDUyNyA1MjcgNDk4IDUyOSA1MjUgNTI1IDUyNSA1MjUgNDUyIDUyNSA0NTIgXQ0vRW5jb2RpbmcgL1dpbkFuc2lFbmNvZGluZyANL0ZvbnREZXNjcmlwdG9yIDkgMCBSIA0+Pg1lbmRvYmoNOSAwIG9iag08PA0vVHlwZSAvRm9udERlc2NyaXB0b3IgDS9Bc2NlbnQgNzUwIA0vQ2FwSGVpZ2h0IDUwMCANL0Rlc2NlbnQgLTI1MCANL0ZsYWdzIDMyIA0vRm9udEJCb3ggWyAtNTAzIC0zMDcgMTI0MCA5NjQgXSANL0ZvbnROYW1lIC9DYWxpYnJpIA0vSXRhbGljQW5nbGUgMCANL1N0ZW1WIDAgDT4+DWVuZG9iag0xMCAwIG9iag08PA0vVHlwZSAvRm9udCANL0Jhc2VGb250IC9DYWxpYnJpLEJvbGQgDS9TdWJ0eXBlIC9UcnVlVHlwZSANL05hbWUgL0YxIA0vRmlyc3RDaGFyIDMyIA0vTGFzdENoYXIgMjU1IA0vV2lkdGhzIFsyMjYgMzI1IDQzOCA0OTggNTA2IDcyOSA3MDQgMjMzIDMxMSAzMTEgNDk4IDQ5OCAyNTcgMzA2IDI2NyA0MjkgNTA2IA01MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiAyNzUgMjc1IDQ5OCA0OTggNDk4IDQ2MyA4OTggDTYwNSA1NjAgNTI5IDYzMCA0ODcgNDU4IDYzNyA2MzAgMjY2IDMzMSA1NDYgNDIyIDg3NCA2NTggNjc2IDUzMiANNjg2IDU2MiA0NzIgNDk1IDY1MiA1OTEgOTA2IDU1MCA1MTkgNDc4IDMyNCA0MjkgMzI0IDQ5OCA0OTggMzAwIA00OTMgNTM2IDQxOCA1MzYgNTAzIDMxNiA0NzQgNTM2IDI0NSAyNTUgNDc5IDI0NSA4MTMgNTM2IDUzNyA1MzYgDTUzNiAzNTUgMzk4IDM0NiA1MzYgNDczIDc0NSA0NTkgNDczIDM5NyAzNDMgNDc1IDM0MyA0OTggNTA2IDUwNiANNTA2IDUwNiA1MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiA1MDYgNTA2IA01MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiA1MDYgNTA2IDUwNiAyMjYgDTMyNSA0OTggNTA2IDQ5OCA1MDYgNDk4IDQ5OCA0MTQgODM0IDQxNiA1MzggNDk4IDMwNiA1MDYgMzkwIDM0MiANNDk4IDMzNyAzMzUgMzAwIDU2MyA1OTcgMjY3IDMwMyAyNTIgNDM1IDUzOCA2NTcgNjkwIDcwMSA0NjMgNjA1IA02MDUgNjA1IDYwNSA2MDUgNjA1IDc3NSA1MjkgNDg3IDQ4NyA0ODcgNDg3IDI2NiAyNjYgMjY2IDI2NiA2MzkgDTY1OCA2NzYgNjc2IDY3NiA2NzYgNjc2IDQ5OCA2ODAgNjUyIDY1MiA2NTIgNjUyIDUxOSA1MzIgNTU0IDQ5MyANNDkzIDQ5MyA0OTMgNDkzIDQ5MyA3NzQgNDE4IDUwMyA1MDMgNTAzIDUwMyAyNDUgMjQ1IDI0NSAyNDUgNTM2IA01MzYgNTM3IDUzNyA1MzcgNTM3IDUzNyA0OTggNTQzIDUzNiA1MzYgNTM2IDUzNiA0NzMgNTM2IDQ3MyBdDS9FbmNvZGluZyAvV2luQW5zaUVuY29kaW5nIA0vRm9udERlc2NyaXB0b3IgMTEgMCBSIA0+Pg1lbmRvYmoNMTEgMCBvYmoNPDwNL1R5cGUgL0ZvbnREZXNjcmlwdG9yIA0vQXNjZW50IDc1MCANL0NhcEhlaWdodCA1MDAgDS9EZXNjZW50IC0yNTAgDS9GbGFncyAzMiANL0ZvbnRCQm94IFsgLTUxOSAtMzA2IDEyNDAgOTcxIF0gDS9Gb250TmFtZSAvQ2FsaWJyaSxCb2xkIA0vSXRhbGljQW5nbGUgMCANL1N0ZW1WIDAgDT4+DWVuZG9iag0xMiAwIG9iag08PA0vVHlwZSAvQ2F0YWxvZyANL1BhZ2VzIDMgMCBSIA0vUGFnZU1vZGUgL1VzZU5vbmUgDS9WaWV3ZXJQcmVmZXJlbmNlcyA8PA0vSGlkZVRvb2xiYXIgZmFsc2UgDS9IaWRlTWVudWJhciBmYWxzZSANL0hpZGVXaW5kb3dVSSBmYWxzZSANL0ZpdFdpbmRvdyBmYWxzZSANL0NlbnRlcldpbmRvdyBmYWxzZSANL0Rpc3BsYXlEb2NUaXRsZSBmYWxzZSANL05vbkZ1bGxTY3JlZW5QYWdlTW9kZSAvVXNlTm9uZSANPj4NPj4NZW5kb2JqDXhyZWYNMCAxMw0wMDAwMDAwMDAwIDY1NTM1IGYgDTAwMDAwMDAwNDggMDAwMDAgbiANMDAwMDAwMDIyMCAwMDAwMCBuIA0wMDAwMDAwMjU2IDAwMDAwIG4gDTAwMDAwMDAzMjEgMDAwMDAgbiANMDAwMDAwMDUwNCAwMDAwMCBuIA0wMDAwMDAxODc3IDAwMDAwIG4gDTAwMDAwMDIwNDggMDAwMDAgbiANMDAwMDAwMjIyNiAwMDAwMCBuIA0wMDAwMDAzMzEyIDAwMDAwIG4gDTAwMDAwMDM0OTEgMDAwMDAgbiANMDAwMDAwNDU4NCAwMDAwMCBuIA0wMDAwMDA0NzY5IDAwMDAwIG4gDXRyYWlsZXINPDwNL1NpemUgMTMgDS9Sb290IDEyIDAgUiANL0luZm8gMSAwIFIgDS9JRFs8QzFEMTBFNDk4OTQ2QkU0RUJFODUzRUNCRDk4OEM1Q0Q+PEMxRDEwRTQ5ODk0NkJFNEVCRTg1M0VDQkQ5ODhDNUNEPl0NPj4Nc3RhcnR4cmVmDTUwMjMNJSVFT0YN

but getting this following error Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

Answer

Syntax picture Syntax · May 4, 2014

This is possible if the browser supports the download property in anchor elements.

var sampleBytes = new Int8Array(4096);

var saveByteArray = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (data, name) {
        var blob = new Blob(data, {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = name;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

saveByteArray([sampleBytes], 'example.txt');


JSFiddle: http://jsfiddle.net/VB59f/2

Related questions

JavaScript blob filename without link

How do you set the name of a blob file in JavaScript when force downloading it through window.location? function newFile(data) { var json = JSON.stringify(data); var blob = new Blob([json], {type: "octet/stream"}); var url = window.URL.createObjectURL(…

Read More
Javascript - I created a blob from a string, how do I get the string back out?

I have a string that I called Blob() on: var mystring = "Hello World!"; var myblob = new Blob([mystring], { type: 'text/plain' }); mystring = ""; How do I get the string back out? function getBlobData(blob) { // Not sure what code to put here } …

Read More
Display image from blob using javascript and websockets

I'm currently working on a WebSocket application that is displaying images send by a C++ server. I've seen a couple of topics around there but I can't seem to get rid of this error in Firefox: Image corrupt or truncated: …

Read More