JavaScript atob is different than Notepad++ Base64 Decode

Question

I am receiving the content of a zip file (from an API) as a Base64-encoded string.

If I paste that string into Notepad++ and go

Plugins > MIME Tools > Base64 Decode

and save it as test.zip, it becomes a valid zip file, I can open it.

Now, I am trying to achieve the same thing in JavaScript.

I have tried atob(), and probably everything mentioned in the answers here and the code from Mozilla doc.

atob produces a similar content, but some characters are decoded differently (hence becomes an invalid zip file). The other methods throw an invalid URI error.

How can I reproduce Notepad++ behaviour in JavaScript?

@Phil This is what I used to save the file: https://stackoverflow.com/questions/13405129/javascript-create-and-save-file#30832210 — Aximili, Sep 24 '19 at 23:07

score 5 · Accepted Answer · answered Sep 24 '19 at 07:08

The window.atob is only good for decoding data which fits in a UTF-8 string. Anything which cannot be represented in UTF-8 string will not be equal to its binary form when decoded. Javascript, at most, will try encoding the resultant bytes in to UTF-8 character sequence. This is the reason why your zip archive is rendered invalid eventually.

The moment you do the following:

var data = window.atob(encoded_data)

... you are having a different representation of your data in a UTF-8 string which is referenced by the variable data.

You should decode your binary data directly to an ArrayBuffer. And window.atob is not a good fit for this.

Here is a function which can convert base64 encoded data directly in to an ArrayBuffer.

Amazing! I spent the whole day looking for this, thanks a lot! — Aximili, Sep 24 '19 at 23:20
This worked for me too. I spent 3 days to decode when trying to implement a function in BigQuery to get base64 encoded gzipped string, thanks a lot!!! — Ranga Vure, Jun 12 '22 at 06:43

score 0 · Answer 2 · answered Sep 06 '22 at 12:48

As mentioned, do not use atob directly for decoding Base64 encoded zip files. You can use this function mentioned in https://stackoverflow.com/a/21797381/3508516 instead.

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

JavaScript atob is different than Notepad++ Base64 Decode

2 Answers2