output a PDF from a base64 byte array

Question

I have looked at quite a few samples of how people are getting their base 64 byte arrays into PDF but sadly none seem to be working for me. Looked at : Javascript: Open PDF in new tab from byte array and how to convert byte array to pdf and download

my code is not really any different from what I can tell. I have a JS-Fiddle here with test byte array data that I can confirm via different base64 encoders/decoders that it is valid. I am hoping someone can see what I am doing wrong with it. I am using the atob() wrapper to decode the base64 string and it does appear to be doing it correctly. Thanks to anyone who has suggestions.

For those who would prefer to just look at it here:

function go()  {
var data = byteData ; 
//  console.log(data); 
var pdfData = atob(data);
console.log(pdfData)
var file = new Blob([pdfData], {type:'application/pdf'});
var fileUrl = URL.createObjectURL(file);

 //open it via a link
var fileName = "test.pdf";
var a = document.createElement("a");
document.body.appendChild(a);
a.href = fileUrl;
a.download = fileName;
a.click();
//open it directly 
window.open(fileUrl);

}

const  byteData = "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bXA6TW9kaWZ5RGF0ZT4yMDE4LTA4LTEzVDE0OjE5OjQ0LTA3OjAwPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHBkZjpQcm9kdWNlcj5BY3JvYmF0IERpc3RpbGxlciAxNS4wIChXaW5kb3dzKTwvcGRmOlByb2R1Y2VyPgogICAgICAgICA8ZGM6Zm9ybWF0PmFwcGxpY2F0aW9uL3BkZjwvZGM6Zm9ybWF0PgogICAgICAgICA8ZGM6dGl0bGU+CiAgICAgICAgICAgIDxyZGY6QWx0PgogICAgICAgICAgICAgICA8cmRmOmxpIHhtbDpsYW5nPSJ4LWRlZmF1bHQiPm5ldyAxPC9yZGY6bGk+CiAgICAgICAgICAgIDwvcmRmOkFsdD4KICAgICAgICAgPC9kYzp0aXRsZT4KICAgICAgICAgPGRjOmNyZWF0b3I+CiAgICAgICAgICAgIDxyZGY6U2VxPgogICAgICAgICAgICAgICA8cmRmOmxpPk1NY0RlbGw8L3JkZjpsaT4KICAgICAgICAgICAgPC9yZGY6U2VxPgogICAgICAgICA8L2RjOmNyZWF0b3I+CiAgICAgICAgIDx4bXBNTTpEb2N1bWVudElEPnV1aWQ6OTg1OWJhYTMtNTI1ZS00MjA3LTljNWUtN2IxMGVmYmM2NzRmPC94bXBNTTpEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06SW5zdGFuY2VJRD51dWlkOjIwNzU1NmJjLTBmMWUtNGNhYS1iNWJhLWUwNzAwZTY5Yzc2MjwveG1wTU06SW5zdGFuY2VJRD4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/Pg0KZW5kc3RyZWFtDWVuZG9iag0zIDAgb2JqDTw8L0ZpbHRlci9GbGF0ZURlY29kZS9GaXJzdCA0L0xlbmd0aCA0OS9OIDEvVHlwZS9PYmpTdG0+PnN0cmVhbQ0KaN6yUDBQsLHRd84vzStRMNT3zkwpjjY0AgoGxeqHVBak6gckpqcW29kBBBgA3/oLrQ0KZW5kc3RyZWFtDWVuZG9iag00IDAgb2JqDTw8L0ZpbHRlci9GbGF0ZURlY29kZS9GaXJzdCA0L0xlbmd0aCAxNTMvTiAxL1R5cGUvT2JqU3RtPj5zdHJlYW0NCmjefMy9CoMwFEDhV7mbydD8WKVaRJBmFYSWdnGxyQUDwZRrxNevQ+fu5zs1KGga2W1pjsT63hoMgcsb4ZR8XMyUkJlrrnSlKn3Wha6L4qQumVLZrzrYcLfkP6kULgR4Iq2HhFLkIueyj+7/ZKDoNovEOkvxPSUwfk0+BCTQpVAwspdfXNzXkXP58CkgW3AHzdv2K8AAYHM3rA0KZW5kc3RyZWFtDWVuZG9iag01IDAgb2JqDTw8L0RlY29kZVBhcm1zPDwvQ29sdW1ucyA0L1ByZWRpY3RvciAxMj4+L0ZpbHRlci9GbGF0ZURlY29kZS9JRFs8MkQyMkNBQUM5MjQxOEE3Qjg3RkMxODU3NzVGNzAwMzQ+PEZENDkxMzFBNDA0MjM4NEI5NjMxRjRBRjdENDQxQjYwPl0vSW5mbyA5IDAgUi9MZW5ndGggNDgvUm9vdCAxMSAwIFIvU2l6ZSAxMC9UeXBlL1hSZWYvV1sxIDIgMV0+PnN0cmVhbQ0KaN5iYgACJkauCwxMDIxtQIK3HcTqBRHfgBLPFgJZDAyMQILpP5BgZAAIMACRngYbDQplbmRzdHJlYW0NZW5kb2JqDXN0YXJ0eHJlZg0KMTE2DQolJUVPRg0K";

Your code is fine. I just editted your fiddle with a different byte array for a basic pdf and it works fine. Check [here](https://jsfiddle.net/e1w3g8p0/49/). Can you reverify the byte array? — Dimith, Aug 14 '18 at 00:33
thanks for the code review. I can see definitely yours is working. I output my base64 from a console.log so maybe it went bad in some way. Thanks again. — macm, Aug 14 '18 at 05:01
Hi @Dimith, can I ask what you used to generate your hello world byte array? I took your sample and ran it through my operation and it worked 100%. I then made a new pdf from a notepad file saying hello world and ran it through both adobe PDF and microsoft print to pdf feature. Both gave the same result but neither worked for returning a valid pdf. What app did you use to generate the sample you used? — macm, Aug 14 '18 at 15:33
Hi @macm that was a byte array given in the mozilla pdf.js [examples](http://mozilla.github.io/pdf.js/examples/index.html#interactive-examples). However you are correct, like you said I created a PDF from microsoft's word, published it as pdf, convert it to byte array and use it in the above code, it didnt work. Sorry for not trying that in the first place. — Dimith, Aug 15 '18 at 06:14
Ok so it works in [this](http://jsfiddle.net/cq0asLqz/3633/) , which is from the examples. I just replaced the byte array. Used a pdf created from MS Word. And converted it to a byte array using [this online tool](http://base64converter.com/). See if this helps, possibly you can work around the code to generate a downloadable file. — Dimith, Aug 15 '18 at 06:27

aniltilanthe · Answer 1 · 2020-01-07T14:11:11.683

you also need to convert your base64 string to arraybuffer.

function _base64ToArrayBuffer(base64) {
    var binary_string = window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
}

from this convert base64 string to arraybuffer

and call it in your code sample like this :-

function go()  {
var data = byteData ; 
//  console.log(data); 

// HERE THIS CHANGE IN YOUR CODE
var pdfData = _base64ToArrayBuffer(data);


var file = new Blob([pdfData], {type:'application/pdf'});
var fileUrl = URL.createObjectURL(file);

 //open it via a link
var fileName = "test.pdf";
var a = document.createElement("a");
document.body.appendChild(a);
a.href = fileUrl;
a.download = fileName;
a.click();
//open it directly 
window.open(fileUrl);
}

this jsfiddle :- fiddle

output a PDF from a base64 byte array

1 Answers1