Javascript 中 atob 方法解码中文字符乱码问题
由于一些网络通讯协议的限制,你必须使用
window.btoa()
方法对原数据进行编码后,才能进行发送。接收方使用相当于window.atob()
的方法对接受到的 base64 数据进行解码,得到原数据。例如,发送某些含有 ASCII 码表中 0 到 31 之间的控制字符的数据。
window.btoa
与 window.atob
不支持中文
对于 unicode 编码的字符进行 base64 编码之后,通过浏览器原生的 btoa 方法界面中文会乱码。
在 bash 终端,将“中文”转成 base64 编码
$ echo 中文 | base64
5Lit5paHCg==
在 Chrome console 通过 window.atob
解码,结果为乱码
> window.atob('5Lit5paHCg==')
ä¸æ–‡
在 Chrome console 中执行 windows.btoa
编码,报错
> window.btoa('中文')
Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
从错误提示看, btoa
仅支持 ASCII 编码。
借助 encodeURIComponent
和 decodeURIComponent
转义非中文字符
由于 btoa
仅支持 ASCII 字符序列,如果通过 encodeURIComponent
将中文字符编码成ASCII字符序列,再通过 btoa
进行 base64 编码。
编码
> window.btoa(encodeURIComponent('中文'))
"JUU0JUI4JUFEJUU2JTk2JTg3"
解码
> decodeURIComponent(window.atob('JUU0JUI4JUFEJUU2JTk2JTg3'))
"中文"
虽然到达了曲线救国的目的,但是由于 encodeURIComponent
和 decodeURIComponent
已经达到了转义控制字符的目的,使用 atob
和 btoa
感觉是多此一举。
第三方 Base64 工具
webtoolkit.base64是一个第三方实现的 Base64 编码工具,完美的支持 unicode 编码的字符串。
> Base64.encode('中文')
"5Lit5paH"> Base64.decode('5Lit5paH');
"中文"
另外,如果服务端为 Nodejs ,可用如下 coffee 代码进行 base64 的编码和解码。
btoa: (s)->
(new Buffer(s, 'utf8')).toString('base64')
atob: (s)->
(new Buffer(s, 'base64').toString('utf8'))
参考阅读
- btoa(), atob() 支援中文的方法
- How to encode UTF8 characters into Base64 in JavaScript
- window.atob
- Best practice: escape, or encodeURI / encodeURIComponent
Javascript 中 atob 方法解码中文字符乱码问题相关推荐
- 解决 Javascript 中 atob 方法解码中文字符乱码问题
转载地址:http://blog.sqrtthree.com/2015/08/29/utf8-to-b64/ 首先, 为什么要编码? 由于一些网络通讯协议的限制, 又或者是出于信息加密的目的, 我们就 ...
- Javascript 中 atob/btoa
解决 Javascript 中 atob 方法解码中文字符乱码问题 由于一些网络通讯协议的限制,你必须使用 window.btoa() 方法对原数据进行编码后,才能进行发送.接收方使用相当于 wind ...
- java中Cookie中文字符乱码问题
如果Cookie中的Value 中有中文字符出现,在加入Cookie的时候,会出现下面的错误: java.lang.IllegalArgumentException: Control characte ...
- myeclipse连接mysql生成数据表时中文字符乱码或问号(解决方法)
myeclipse连接mysql生成数据表时中文字符乱码或问号(解决方法) 参考文章: (1)myeclipse连接mysql生成数据表时中文字符乱码或问号(解决方法) (2)https://www. ...
- SpringMVC项目中中文字符乱码问题及解决办法总结(非专业最优解决办法) -- ajax传值乱码; request.getParameter()乱码;
SpringMVC项目中中文字符乱码问题及解决办法总结(非专业最优解决办法) -- ajax传值乱码; request.getParameter()乱码; 参考文章: (1)SpringMVC项目中中 ...
- ssis 转换中文字符乱码_SSIS软件包中的字符映射转换
ssis 转换中文字符乱码 This article explores the Character Map Transformation in SSIS package with available ...
- SQLServer乱码问题的分析及解决方法(中文字符被存入数据库后,显示为乱码)
SQLServer乱码问题的分析及解决方法(中文字符被存入数据库后,显示为乱码) 参考文章: (1)SQLServer乱码问题的分析及解决方法(中文字符被存入数据库后,显示为乱码) (2)https: ...
- java中文乱码decode_JAVA中文字符乱码解决详解
四.JSP读取request.getParameter里的中文参数后,在页面显示为乱码.在JAVA的WEB应用中,对request对象里的parameters的中文处理一直是常见也最难搞的一只大怪兽. ...
- php中文字符乱码,如何解决php中文字符乱码问题
php中文字符乱码的解决办法:1.改mysql配置文件"my.ini"或"my.cnf":2.在需要做数据库操作的php程序前加入语句"mysql_q ...
最新文章
- Go 语言web 框架 Gin 练习4
- 自考计算机网络技术一,2017自考计算机网络技术填空题「附答案」
- 苹果4怎么越狱_苹果手机如何截屏
- vue router 常用操作 重定向 redirect
- springboot, thymeleaf 教你快速搭建网站
- Ubuntu14.04安装与卸载ROS(避坑教程)配kinetic版本安装官方网址
- Linux系统发行版本介绍(一)——CentOS介绍
- 实用软件工程(张海藩)课后答案
- kali-TheFatRat木马生成工具安装及简单使用
- 网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
- 腾讯云,体验万象优图鉴黄服务
- 第二篇 界面开发 (Android学习笔记)
- android 系统的切图方式_UI设计规范一Android尺寸单位换算及切图规范
- 【移动架构】Flutter vs React Native:最后一句话。
- 工业循环水浅层砂过滤器(励进浅层介质过滤器)介绍及现场案例图
- 苏嵌//张福辉//2018.7.13
- 敏捷开发流程之Scrum:3个角色、5个会议、12原则
- 云学智慧校园-高校信息化一体化平台 V2.0 SE-WBS排期表(初拟)
- 借助Bilibili Evolved和aria2批量下载b站视频
- 根据已经commit的数据,进行leader和peon之间的同步