解决 Javascript 中 atob 方法解码中文字符乱码问题

 

 

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

window.btoa 与 window.atob 不支持中文
对于 unicode 编码的字符进行 base64 编码之后，通过浏览器原生的 btoa 方法界面中文会乱码。

在 bash 终端，将“中文”转成 base64 编码

$ echo 中文 | base64
5Lit5paHCg==
在 Chrome console 通过 window.atob 解码，结果为乱码

> window.atob('5Lit5paHCg==')
中文
在 Chrome console 中执行 windows.btoa 编码，报错

> window.btoa('中文')
Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
从错误提示看， btoa 仅支持 ASCII 编码。

借助 encodeURIComponent 和 decodeURIComponent 转义非中文字符
由于 btoa 仅支持 ASCII 字符序列，如果通过 encodeURIComponent 将中文字符编码成ASCII字符序列，再通过 btoa 进行 base64 编码。

编码

> window.btoa(encodeURIComponent('中文'))
"JUU0JUI4JUFEJUU2JTk2JTg3"
解码

> decodeURIComponent(window.atob('JUU0JUI4JUFEJUU2JTk2JTg3'))
"中文"
虽然到达了曲线救国的目的，但是由于 encodeURIComponent 和 decodeURIComponent 已经达到了转义控制字符的目的，使用 atob 和 btoa 感觉是多此一举。

第三方 Base64 工具
webtoolkit.base64是一个第三方实现的 Base64 编码工具，完美的支持 unicode 编码的字符串。

> Base64.encode('中文')
"5Lit5paH"

> Base64.decode('5Lit5paH');
"中文"
另外，如果服务端为 Nodejs ，可用如下 coffee 代码进行 base64 的编码和解码。

btoa: (s)->
    (new Buffer(s, 'utf8')).toString('base64')
atob: (s)->
    (new Buffer(s, 'base64').toString('utf8'))
参考阅读
btoa(), atob() 支援中文的方法
How to encode UTF8 characters into Base64 in JavaScript
window.atob
Best practice: escape, or encodeURI / encodeURIComponent

值得一提的是

某些情况下需要用 window.btoa(unescape(encodeURIComponent(svg1)));

JavaScript unescape() 和 escape() 函数 

提示和注释

注释：ECMAScript v3 已从标准中删除了 unescape() 函数，并反对使用它，因此应该用 decodeURI() 和 decodeURIComponent() 取而代之。

详见：https://www.w3school.com.cn/jsref/jsref_unescape.asp

 

补充：

还可以通过如下方式 解析base64 (但这个base64中 如果含有中文，我这里以前后端为例子)

假如 base64 中含有中文，后端通过 第三方库编码，前端再不用第三方库的情况下可以这样解码，并且中文不乱码，

具体实现如下：

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

let hahahaBase64 = "e+WTiOWTiOWTiH0="; // 通过第三方库 "{哈哈哈}" 转出 base64 而 不是 window.btoa()
// 直接 window.atob()
console.log(window.atob(hahahaBase64)); // {哈哈哈}
// 解码后 通过 二进制数据缓冲区
console.log(new Blob([base64ToArrayBuffer(hahahaBase64)]).text()); // [[PromiseResult]]: "{哈哈哈}"