用 JS 进行 Base64 编码、解码

从IE10+浏览器开始，所有浏览器就原生提供了 Base64 编码、解码方法，不仅可以用于浏览器环境，Service Worker 环境也可以使用。
方法名就是 atob 和 btoa ，具体语法如下：

window.btoa("qinyandetiankong")        // 编码
"cWlueWFuZGV0aWFua29uZw=="
window.atob("cWlueWFuZGV0aWFua29uZw==") // 解码
"qinyandetiankong"

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

<!--[if IE]>
<script src="https://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，于是正好完美衔接上。

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

开源的base64.js ，使用很简单，浏览器引入该JS文件，然后Base64编码这样：

Base64.encode('qinyandetiankong'); // 编码
"cWlueWFuZGV0aWFua29uZw=="

解码就调用 decode方法，如下：

Base64.decode("cWlueWFuZGV0aWFua29uZw=="); // 解码
'qinyandetiankong'

解码、编码中文字符

window.btoa(window.encodeURIComponent('青颜的天空')) // "JUU5JTlEJTkyJUU5JUEyJTlDJUU3JTlBJTg0JUU1JUE0JUE5JUU3JUE5JUJB"window.decodeURI(atob('JUU5JTlEJTkyJUU5JUEyJTlDJUU3JTlBJTg0JUU1JUE0JUE5JUU3JUE5JUJB')) // "青颜的天空"

用法一：解析文本中的内容

借助FileReader对象和readAsDataURL方法，我们可以把任意的文件转换为Base64 Data-URI。假设我们的文件对象是file，则转换的JavaScript代码如下：

var reader = new FileReader();
reader.onload = function(e) {// 注意这里的this实际上就是readerif (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 用法

// 下列方法皆对于 file 或 blob 有效
reader.abort()             // 取消文件读取操作
reader.readAsArrayBuffer()   // 返回一个 ArrayBuffer 的数据对象
reader.readAsBinaryString()   // 返回原始二进制数据内容 （实验性的api）
reader.readAsDataURL()     // 返回 base64 内容
reader.readAsText()        // 返回文本内容

参考资料：
https://www.jianshu.com/p/14437764eff3

用 JS 进行 Base64 编码、解码相关推荐

js实现Base64编码解码
js实现标准的Base64编码解码 Base64 是使用64个可打印ASCII字符(A-Z.a-z.0-9.+./)将任意字节序列数据编码成ASCII字符串,另有"="符号用作后缀 ...
Vue项目：路由跳转时中文传参被URL编码，怎么解决？用js封装Base64编码解码加密解密
1.在utils中封装js方法,代码如下: var Base64 = { // private property_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZab ...
js base64 编码解码
js base64 编码解码 encode decode,可以直接使用 function Base64() {// private property_keyStr = "ABCDEFGHIJ ...
原来浏览器原生支持JS Base64编码解码
原来浏览器原生支持JS Base64编码解码转载来源:https://www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-btoa-encode- ...
js实现base64编码和解码
文章目录需求什么是Base64 编码规则如何解码 js实现基于base64的编码解码 window自带函数进行Base64编码解码 Base64编码的实际运用图片base64编码需求应公司 ...
js编码java解码_常用的js、java编码解码方法
前言前后端直接传输数据进行交互不就行了吗,为什么还要进行编码解码?正常情况下直接交互没问题,但当有类似以下情况出现时就需要进行编码再进行传输: 1.编码格式难以统一,导致数据交互过程出现中文乱码等问 ...
python使用base64编码解码数据
python使用base64编码解码数据 base64模块是用来作base64编码解码,常用于小型数据的传输.编码后的数据是一个字符串,其包括a-z.A-Z.0-9./.+共64个字符,即可用6个字节 ...
java svgbase64转byte_java 图片进行base64 编码解码
java 图片进行base64 编码解码刘振兴代码分享 2017年06月07日 10555 2条评论 import sun.misc.BASE64Decoder; import sun.misc. ...
openssl算法 —— 利用openssl进行BASE64编码解码、md5/sha1摘要、AES/DES3加密解密
openssl 加密字符串的方法: 一.利用openssl命令进行BASE64编码解码(base64 encode/decode): 1. BASE64编码命令对字符串'abc'进行base64编码 ...
Java工程中引用Base64编码解码小记
Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一. Base64编码说明 Base64编码要求把3个8位字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两 ...

用 JS 进行 Base64 编码、解码

用 JS 进行 Base64 编码、解码相关推荐

最新文章

热门文章