码云前端开发 2019-04-15

如何利用浏览器原生支持JS的Base64编码解码

文章目录隐藏

原生 atob 和 btoa 方法

Base64 解码

Base64 编码
IE8/IE9 的 polyfill

实践出真知，不怕你不会就怕你不下去总结。最近在做项目的时候遇到这样一个前端 HTML 字符信息转 Base64 要求，没有多想的我毫不犹豫的在网上找了一个开源的 base64.js 来满足我的需求，使用很简单，这里我就不说使用过成了，相信大家都会引入使用。

经过使用数据准确，功能良好。当时弄完还洋洋得意，想着今天可以早早的回家了，本以为是个完美的解决。结果，今天发现，我日！原来浏览器很早就支持了 JS Base64 加密解密，而我的做法完全就是放屁脱裤子–多办手续啊！唉！由于技术广度掌握不足，或者说个人的 JS 基础掌握不牢，导致我浪费了大把时间去找 Base64 的 JS 语言库，学习其 API 用法，换来的却是一个冗余而且完全不需要加载的 JS，现在来看，真是个糟糕的技术选型，所以我要改变。

原生 atob 和 btoa 方法

通过查阅资料发现，从 IE10+浏览器开始，所有浏览器就原生提供了 Base64 编码解码方法，不仅可以用于浏览器环境，Service Worker 环境也可以使用。

方法名就是 atob 和 btoa，具体语法如下：

Base64 解码

语法（浏览器中）：

var decodedData = window.atob(encodedData);

或者（浏览器或 js Worker 线程中）：

var decodedData = self.atob(encodedData);

例如：

window.atob('bXliajEyMw==');

// 返回：’mybj123′

完整代码如下：

<head>
    <meta charset="UTF-8">
    <title>Base64 解码</title>
    <style>
        p { color: #0e932e; }
    </style>
</head>
<body>
<p id="result"></p>
<script>
    document.getElementById('result').innerHTML = window.atob && atob('bXliajEyMw==');
</script>
</body>

结果如下：

atob 这个方法名称乍一看，很奇怪，不知道这个单词什么意思。我们可以理解为 A to B，也就是从 A 到 B。这里的 B 指的就是 Base64 吗？哈哈哈，恭喜你！猜错了！A 指的才是 Base64，反的，B 才是普通字符，普通意思就是 low，俗称 low B。所以我们这么记忆，Low B，Low B，B 表示很 Low 的普通字符，A 才是 Base64，和首字母对应关系是反的。

因此，atob 表示 Base64 字符 to 普通字符，也就是 Base64 解码。

Base64 编码

语法（浏览器中）：

var encodedData = window.btoa(stringToEncode);

或者（浏览器或 js Worker 线程中）：

var encodedData = self.btoa(stringToEncode);

例如：

window.btoa('mybj23');
// 返回：'bXliajEyMw=='

完整代码如下：

<head>
    <meta charset="UTF-8">
    <title>Base64 编码</title>
    <style>
        p { color: #0e932e; }
    </style>
</head>
<body>
<p id="result"></p>
<script>
    document.getElementById('result').innerHTML = window.btoa && btoa('mybj123');
</script>
</body>

效果如下：

btoa 这个方法名称乍一看，很奇怪，不知道这个单词什么意思。我们可以理解为 B to A，也就是从 B 到 A。那 B 指什么，A 指什么呢？和 atob 方法一样，B 指的是 low B 普通字符串，A 指的是 Base64 字符。

因此，btoa 方法表示 low B 普通字符 to Base64 字符，也就是 Base64 编码。

文章到这儿貌似还没有结束，我在测试的时候发现上面的方法对于字母数字的数据转换没有问题，但如果是中文 Base64 数据转换会有报错问题。

通过查资料我们可以试试下面这样：

btoa(unescape(encodeURIComponent(str)))

我用 SVG 代码测试是 OK 的。

网友也提出了解决方法，就是中文先 encode 转码和 decode 编码：

window.btoa(window.encodeURIComponent('嘻嘻哈哈哈哈啦啦啦啦'));
window.decodeURIComponent(window.atob('JUU1JTk4JUJCJUU1JTk4JUJCJUU1JTkzJTg4JUU1JTkzJTg4JUU1JTkzJTg4JUU1JTkzJTg4JUU1JTk1JUE2JUU1JTk1JUE2JUU1JTk1JUE2JUU1JTk1JUE2'));

IE8/IE9 的 polyfill

当下，仍有不少 PC 项目还需要兼容 IE9，所以，我们可以专门针对这些浏览器再引入一段 ployfill 脚本或者一个 JS 文件即可。

ployfill JS 脚本戳这里，或者直接右键这里下载源文件！

实际使用，我们可以借助 IE 条件注释无缝对接。

也就是 HTML 中嵌入下面一段代码：

<!--[if IE]>
<script src="./base64-polyfill.js"></script>
<![endif]-->

[if IE]表示所有 IE 浏览器，由于 IE10+浏览器已经放弃了著名的 IE 条件注释的支持，Chrome 等浏览器本身就不支持这个 IE 私有语法，因此，很天然的，上面一段 script 引入只在 IE9-浏览器下有效。而我们本来就希望只 IE8，IE9 浏览器引入 ployfill，于是正好完美衔接上。

也就是原生支持 atob 和 btoa 方法的浏览器认为就是一段无需关心的 HTML 注释，不支持 atob 和 btoa 的 IE9 及其以下浏览器则会加载我们的 base64-polyfill.js，使浏览器也支持 window.btoa 和 window.atob 这个语法。

完整代码如下：

<head>
    <meta charset="UTF-8">
    <title>Base64 解码/编码</title>
    <style>
        p { color: #0e932e; }
    </style>
    <!--[if IE]>
    <script src="js/base64-polyfill.js"></script>
    <![endif]-->
</head>
<body>
<p id="result1"></p>
<p id="result2"></p>
<script>
    result1.innerHTML = atob('bXliajEyMw==');
    result2.innerHTML = btoa('mybj123');
</script>

结果显示：