使用window.btoa和window.atob来进行Base64编码和解码

方法描述

WindowBase64.atob() 函数用来解码一个已经被base-64编码过的数据。

WindowBase64.btoa() 函数将ascii字符串或二进制数据转换成一个base64编码过的ASCII字符串,该方法不能直接作用于Unicode字符串.

window.atob: a ==> b
window.btoa: b ==> a

你可以使用 window.btoa() 方法来编码一个可能在传输过程中出现问题的数据,并且在接受数据之后,使用 window.atob() 方法来将数据解码。

var encodedData = window.btoa(stringToEncode);

var decodedData = window.atob(encodedData);

例子:

var encodedData = window.btoa("Hello, world"); //编码

console.log(encodedData);//SGVsbG8sIHdvcmxk

var decodedData = window.atob(encodedData); //解码

console.log(decodedData);//Hello, world

备注:

由于一些网络通讯协议的限制,你必须使用该方法对原数据进行编码后,才能进行发送.接收方使用相当于 window.atob 的方法对接受到的base64数据进行解码,得到原数据.
例如, 发送某些含有ASCII码表中0到31之间的控制字符的数据.

Unicode问题

由于 DOMString 是16位编码的字符串，所以如果有字符超出了8位ASCII编码的字符范围时，在大多数的浏览器中对Unicode字符串调用 window.btoa 将会造成一个 Character Out Of Range 的异常。
有2种方法解决这个问题：

第一个是转义整个字符串然后编码这个它;
第二个是把UTF-16的 DOMString 转码为UTF-8的字符数组然后编码它。 [我没测试过]
下面是2个可行的方法。

方法一: 编码之前转义字符串

function b64EncodeUnicode(str) {

    return window.btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,

    function(match, p1) {

        return String.fromCharCode('0x' + p1);

    }));

}

b64EncodeUnicode('✓ à la mode');// "4pyTIMOgIGxhIG1vZGU="

方法二: 用JavaScript的TypedArray和UTF-8重写DOM的atob()和btoa()

使用像TextEncoding(包含了早期(legacy)的windows,mac, 和 ISO 编码),

TextEncoderLite 或者 Buffer 这样的文本编码器增强(polyfill)和Base64增强,

比如base64-js。

最简单, 最轻量级的解决方法就是使用 TextEncoderLite 和 base64-js.

测试案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>window.atob() && window.btoa()</title>

</head>

<body>

    <input type="text" id="iptText" name="" />

    <input type="button" id="iptBtoa" value="btoa编码" onclick="btoaFun()" />

    <input type="button" id="iptAtob" value="atob解码" onclick="atobFun()" />

    <div>

        <label id="lblInfo1" style="color: red"></label>

        <br/>

        <label id="lblInfo2" style="color: blue"></label>

    </div>

    <script type="text/javascript">

    /* window.atob() 解码*/

    function atobFun() {

        let strText = document.getElementById('lblInfo1').innerHTML;

        let strText2 = document.getElementById('lblInfo2').innerHTML;

        console.log(strText + "解码");

        let strLen = strText.trim();

        if (strLen.length > 0) {

            let encodedStr = window.atob(strText);

            document.getElementById('lblInfo1').innerHTML = encodedStr;

            let encodedStr2 = b64_to_utf8(strText2);

            document.getElementById('lblInfo2').innerHTML = encodedStr2;

            console.log(encodedStr + "解码");

            console.log(encodedStr2 + "解码");

        } else {

            alert('请输入字符串');

        }

    }

    /* window.btoa() 编码*/

    function btoaFun() {

        let strText = document.getElementById('iptText').value;

        let strLen = strText.trim();

        if (strLen.length == 0) {

            alert('请输入字符串');

        } else {

            let decodedStr = window.btoa(strText);

            document.getElementById('lblInfo1').innerHTML = decodedStr;

            let decodedStr2 = utf8_to_b64(strText);

            document.getElementById('lblInfo2').innerHTML = decodedStr2;

            console.log(decodedStr + "编码");

            console.log(decodedStr2 + "编码");

        }

    }

    function utf8_to_b64(str) {

        //encodeURIComponent()会对它发现的任何非标准字符进行编码。

        // unescape && escape 慢慢被废弃，不建议使用。

        // return window.btoa(unescape(encodeURIComponent(str)));

        // return window.btoa(encodeURIComponent(str));

        return window.btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,

            function (match, p1) {

                return String.fromCharCode('0x' + p1);

        }));

    }

    function b64_to_utf8(str) {

        //decodeURIComponent() 解析所有的非标准字符

        // unescape && escape 慢慢被废弃，不建议使用。

        // return decodeURIComponent(escape(window.atob(str)));

        return decodeURIComponent(window.atob(str));

    }

    </script>

</body>

</html>

完整案例