- 从IE10+浏览器开始,所有浏览器就原生提供了 Base64 编码、解码方法,不仅可以用于浏览器环境,Service Worker 环境也可以使用。
方法名就是atob 和btoa ,具体语法如下:
1 2 3 4 | window.btoa("qinyandetiankong") // 编码 "cWlueWFuZGV0aWFua29uZw==" window.atob("cWlueWFuZGV0aWFua29uZw==") // 解码 "qinyandetiankong" |
- IE8/IE9的 polyfill
?当下,仍有不少PC项目还需要兼容IE9,所以,我们可以专门针对这些浏览器再引入一段 ployfill 脚本或者一个JS文件即可。
1 2 3 | <!--[if IE]> <script src="//i2.wp.com/www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-btoa-encode-decode/base64-polyfill.js"></script> <![endif]--> |
[if IE] 表示所有IE浏览器,由于IE10+浏览器已经放弃了著名的IE条件注释的支持,Chrome等浏览器本身就不支持这个IE私有语法,因此,很天然的,上面一段script引入只在IE9-浏览器下有效。而我们本来就希望只IE8,IE9浏览器引入ployfill,于是正好完美衔接上。
也就是原生支持
开源的base64.js ,使用很简单,浏览器引入该JS文件,然后Base64编码这样:
1 2 | Base64.encode('qinyandetiankong'); // 编码 "cWlueWFuZGV0aWFua29uZw==" |
解码就调用
1 2 | Base64.decode("cWlueWFuZGV0aWFua29uZw=="); // 解码 'qinyandetiankong' |
- 解码、编码中文字符
1 2 3 | window.btoa(window.encodeURIComponent('青颜的天空')) // "JUU5JTlEJTkyJUU5JUEyJTlDJUU3JTlBJTg0JUU1JUE0JUE5JUU3JUE5JUJB" window.decodeURI(atob('JUU5JTlEJTkyJUU5JUEyJTlDJUU3JTlBJTg0JUU1JUE0JUE5JUU3JUE5JUJB')) // "青颜的天空" |
-
用法一:解析文本中的内容
借助
FileReader 对象和readAsDataURL 方法,我们可以把任意的文件转换为Base64 Data-URI。假设我们的文件对象是file ,则转换的JavaScript代码如下:
1 2 3 4 5 6 7 8 9 10 11 | var reader = new FileReader(); reader.onload = function(e) {<!-- --> // 注意这里的this实际上就是reader if (this.result) {<!-- --> const content: any = this.result, list = content.split(';base64,') if (list && list.length > 0) {<!-- --> const txt = window.atob(list[1]) // 文本 } } }; reader.readAsDataURL(file); |
附录 FileReader 用法
1 2 3 4 5 6 | // 下列方法皆对于 file 或 blob 有效 reader.abort() // 取消文件读取操作 reader.readAsArrayBuffer() // 返回一个 ArrayBuffer 的数据对象 reader.readAsBinaryString() // 返回原始二进制数据内容 (实验性的api) reader.readAsDataURL() // 返回 base64 内容 reader.readAsText() // 返回文本内容 |
参考资料:
https://www.jianshu.com/p/14437764eff3