从 base64 字节数组输出 PDF

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";

Answer 1

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