前端实现base64解码编码

本文描述了三种前端实现base64解码和编码的方法
Base64 在线编码解码工具 https://base64.us/

方法一：btoa 和 atob

1. btoa 和 atob 是window对象上的两个函数，window.atob()解码，window.btoa()编码

let encodeText = 'xiaxiayaoguai'
let decodeText = 'eGlheGlheWFvZ3VhaQ=='
console.log(atob(decodeText)) // xiaxiayaoguai
console.log(btoa(encodeText)) // eGlheGlheWFvZ3VhaQ==

2. Unicode字符编码报错

这里我们将encodeText = '霞霞要乖'再进行解码就会出现以下报错，因为btoa不支持Unicode字符编码

Failed to execute ‘btoa’ on ‘Window’: The string to be encoded contains characters outside of the Latin1 range.

报错解决办法：

• 编码时，先用encodeURIComponent对字符串进行编，再用btoa进行Base64编码；
• 解码时，先用atob对Base64编码的串进行解码，再用decodeURIComponent对字符串进行解码

let encodeText = '霞霞要乖'
let decodeText = 'JUU5JTlDJTlFJUU5JTlDJTlFJUU4JUE2JTgxJUU0JUI5JTk2'
console.log(btoa(encodeURIComponent(encodeText))) // JUU5JTlDJTlFJUU5JTlDJTlFJUU4JUE2JTgxJUU0JUI5JTk2
console.log(decodeURIComponent(atob(decodeText))) // 霞霞要乖

方法二：下包

1. 下包

   npm install --save js-base64
   

2. 使用

   <script>
       import {Base64} from 'js-base64' // 引入
       export default {
         data() {
           return {
             encodeText:'霞霞要乖',
             decodeText:'6Zye6Zye6KaB5LmW',
           }
         },
         created(){
           this.transformBase64()
         },
         methods: {
           transformBase64(){
             console.log('编码：', Base64.encode(this.encodeText)) // 6Zye6Zye6KaB5LmW
             console.log('解码：', Base64.decode(this.decodeText)) // 霞霞要乖
           }
         }
    
   }
   </script>
   

方法三：js实现

1. 构建函数

   let Base64 = {
       keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
   
       encode: function(e) {
         let t = "";
         let n, r, i, s, o, u, a;
         let f = 0;
         e = Base64._utf8_encode(e);
         while (f < e.length) {
           n = e.charCodeAt(f++);
           r = e.charCodeAt(f++);
           i = e.charCodeAt(f++);
           s = n >> 2;
           o = (n & 3) << 4 | r >> 4;
           u = (r & 15) << 2 | i >> 6;
           a = i & 63;
           if (isNaN(r)) {
             u = a = 64
           } else if (isNaN(i)) {
             a = 64
           }
           t = t + this.keyStr.charAt(s) + this.keyStr.charAt(o) + this.keyStr.charAt(u) + this.keyStr.charAt(a)
         }
         return t
       },
   
       decode: function(e) {
         let t = "";
         let n, r, i;
         let s, o, u, a;
         let f = 0;
         e = e.replace(/[^A-Za-z0-9+/=]/g, "");
         while (f < e.length) {
           s = this.keyStr.indexOf(e.charAt(f++));
           o = this.keyStr.indexOf(e.charAt(f++));
           u = this.keyStr.indexOf(e.charAt(f++));
           a = this.keyStr.indexOf(e.charAt(f++));
           n = s << 2 | o >> 4;
           r = (o & 15) << 4 | u >> 2;
           i = (u & 3) << 6 | a;
           t = t + String.fromCharCode(n);
           if (u != 64) {
             t = t + String.fromCharCode(r)
           }
           if (a != 64) {
             t = t + String.fromCharCode(i)
           }
         }
         t = Base64._utf8_decode(t);
         return t
       },
   
       _utf8_encode: function(e) {
         e = e.replace(/rn/g, "n");
         let t = "";
         for (let n = 0; n < e.length; n++) {
           let r = e.charCodeAt(n);
           if (r < 128) {
             t += String.fromCharCode(r)
           } else if (r > 127 && r < 2048) {
             t += String.fromCharCode(r >> 6 | 192);
             t += String.fromCharCode(r & 63 | 128)
           } else {
             t += String.fromCharCode(r >> 12 | 224);
             t += String.fromCharCode(r >> 6 & 63 | 128);
             t += String.fromCharCode(r & 63 | 128)
           }
         }
         return t
       },
   
       _utf8_decode: function(e) {
         let t = "";
         let n = 0;
         let r = c1 = c2 = 0;
         while (n < e.length) {
           r = e.charCodeAt(n);
           if (r < 128) {
             t += String.fromCharCode(r);
             n++
           } else if (r > 191 && r < 224) {
             c2 = e.charCodeAt(n + 1);
             t += String.fromCharCode((r & 31) << 6 | c2 & 63);
             n += 2
           } else {
             c2 = e.charCodeAt(n + 1);
             c3 = e.charCodeAt(n + 2);
             t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
             n += 3
           }
         }
         return t
       }
     }
   

2. 使用

   let encodeText = '霞霞要乖'
   let decodeText = '6Zye6Zye6KaB5LmW'
   console.log(Base64.encode(encodeText)) // 6Zye6Zye6KaB5LmW
   console.log(Base64.decode(decodeText)) // 霞霞要乖