跳到主要内容

如何使用 javascript 对文字进行 Base64 Encode 编码 和 Decode 解码

· 2 分钟阅读
Eric Cheng

之前的需求要将文字用 Base64 编码和解码,简单的做了些笔记

浏览器原生支援

浏览器原生提供两个 JavaScript 函数来解码和编码 Base64 文字

btoa (binary to ASCII):将二进制数据字符串转换为Base64编码的ASCII字符串 atob (ASCII to binary):解码Base64编码的字符串

测试了一下

let txt = "havocFuture";
let en = window.btoa(txt);
console.log(en); // aGF2b2NGdXR1cmU=
let de = window.atob(en);
console.log(de); // havocFuture

看起来是没有问题,编码后格式是正确的,也可以成功的解码

但是把要编码的文字改成中文字重新执行就会出现错误讯息如下

Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

google 了一下,似乎这个 function 并不支援 UTF-8 文字的编码

第三方 Lib 套件:js-base64

找到一个第三方 Lib 套件

Github:https://github.com/dankogai/js-base64

如果使用的是 npm 的话,先需要 install

$ npm install js-base64

使用上很简单,直接写程式码

import { Base64 } from 'js-base64';

let txt = "老哈的隨手技術筆記";
let en = Base64.encode(txt);
console.log(en); // 6ICB5ZOI55qE6Zqo5omL5oqA6KGT562G6KiY
let de = Base64.decode(en);
console.log(de); // 老哈的隨手技術筆記

测试刚才用 btoa / atob 会报错的中文文字,改用 js-base64 就可以顺利编码和解码了

实作 Base64 Encode 编码 和 Decode 解码

就直接实作了两个页面

Base64 Encode(编码)
Base64 Decode(解码)

欢迎使用及分享… XD

版权声明


這是 google 廣告