Base64 的中文解码

---

前言

Base64 编码带中文的内容，在解析的过程中，出现乱码。

---

基础知识

什么是 Base64

Base64 是一组相似的二进制到文本（binary-to-text）的编码规则，使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。Base64 这个词出自一种 MIME 数据传输编码。

Base64 编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。Base64 也被一些应用（包括使用 MIME 的电子邮件）和在 XML 中储存复杂数据时使用。

js 方法

在 JavaScript 中，有两个函数被分别用来处理解码和编码 base64 字符串：

• atob()
• btoa()

atob() 函数能够解码通过 base-64 编码的字符串数据。相反地，btoa() 函数能够从二进制数据“字符串”创建一个 base-64 编码的 ASCII 字符串。

atob() 和 btoa() 均使用字符串。

但是在遇到中文内容的时候，atob() 函数并不能很好的解析，会出现乱码的情况。

解决中文解码乱码的方法

方法一

'00' + c. charcodeat (0). tostring (16)).slice(-2) 将0前置到单个字符串，例如当 c == \n 时，c. charcodeat (0). tostring(16) 返回 a，迫使 a 表示为 0a
代码如下（示例）：

export const decodeUTF8FromBase64 = (base64: string) => {
  return decodeURIComponent(
     atob(str)
       .split('')
       .map(function (c) {
         return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
       })
       .join('')
   );
}

缺陷：如果输入的是一个非常大的 Base64 字符串，例如内容达到 30,000 个字符时，需要大量的计算，性能不是很好。

方法二

代码如下（示例）：

export const decodeUTF8FromBase64 = (base64: string) => {
  const text = atob(base64);
  const length = text.length;
  const bytes = new Uint8Array(length);
  for (let i = 0; i < length; i++) {
      bytes[i] = text.charCodeAt(i);
  }
  const decoder = new TextDecoder(); // default is utf-8
  return decoder.decode(bytes);
}

---

总结

Base64 的中文解码方法暂时找到这两种，如有更优解会及时更新

参考链接：
stackoverflow 讨论
mdn