electron项目 处理GBK字符乱码问题
前言:
在最近做的项目中, 有一个需求是要electron调用arduino IED的api烧录arduino程序进uno板. 其中在烧录的过程中, 会返回编译的二进制信息. 这个二进制信息需要转成字符串输出到页面供用户查看, 但是遇到了乱码问题. 用了很多方法终于将乱码问题解决.
1. 初尝试
刚开始尝试的时候是 控制台打印的是 uint8Array() 信息, 当时还不知道uint8Array() 这个是什么鬼, 就利用了 js自动转字符串的方式实现 直接拼接字符串获取到的 uint8Array数据
let data = data + '';
然后控制台回来 正常的英文是可以直接自动转换的, 但是后面 出现了一大堆的乱码. 刚开始不知道 就开始调试 找资料...
2. 再尝试
经过初次尝试 我以为是 直接拼接转是不行的, 毕竟不知道uint8Array()是个什么东西, 不猜想应该是个 和数组相关的东西 但是又有区别 就去 MDN 看了下文档
文档介绍如下:
Uint8Array
数组类型表示一个8位无符号整型数组,创建时内容被初始化为0。创建完后,可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
本质也就还是个数组呗. 然后不能直接拼接,那我遍历转换总可以了吧. 然后做了如下操作
function Uint8ArrayToString(data){
let dataString = "";
for (let i = 0; i < data.length; i++) {
dataString += String.fromCharCode(data[i]);
}
return dataString
}
然后 问题并不能解决,本质上和直接拼接是 没有区别的 然后再网上找资料 做了如下的修改
原地址: https://stackoverflow.com/questions/8936984/uint8array-to-string-in-javascript/22373197
unction Utf8ArrayToStr(array) {
var out, i, len, c;
var char2, char3;
out = "";
len = array.length;
i = 0;
while(i < len) {
c = array[i++];
switch(c >> 4)
{
case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
// 0xxxxxxx
out += String.fromCharCode(c);
break;
case 12: case 13:
// 110x xxxx 10xx xxxx
char2 = array[i++];
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
break;
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
char2 = array[i++];
char3 = array[i++];
out += String.fromCharCode(((c & 0x0F) << 12) |
((char2 & 0x3F) << 6) |
((char3 & 0x3F) << 0));
break;
}
}
return out;
}
然后问题还是不能解决. 因为本质还是在utf-8上转.
3. 最后尝试
试了这些 ,还是乱码 然后正常的英文是没有乱码的,我就想 回来的信息肯定出现了中文了. 然后打开arduino IDE 尝试手动烧录固件,发现真的有中文. 但即使是有中文 正常utf-8 是能转的啊 然后就去翻了下arduino的官方社区等等. 最后一篇文章提到. 很多微处理器(列如:STM32) 发送汉字的时候,用的是GBK编码. 这个跟windows系统也有关系. 现在我知道问题了.那么接下来只要解决GBK编码这个问题就行了 然后经过查询 有的是说是用插件 但是插件下载是要积分的. 不考虑了. 然后翻了下博客看到本篇文章的主角 :
' iconv-lite ' 库
这个库就是用来解决 node.js GBK编码的问题的. 而我electron项目用的 恰恰是 node原生api. 然后尝试使用.
简单用法:
npm install iconv-lite --S --D
conversionString (data) => {
// 此处加window是因为我的electron项目前端用的是react全家桶 需要webpack打包
// 不加window. 编译不过...
let iconvLite = window.require('iconv-lite');
return iconvLite.decode(data, 'gbk');
}
问题解决 !!!
参考1: https://stackoverflow.com/questions/8936984/uint8array-to-string-in-javascript/22373197
参考2: https://www.npmjs.com/package/iconv-lite
总结:
在遇到问题的时候不要慌 一步一步来 慢慢解决 此篇文章没有多高技术含量 主要是想记录下我遇到问题时的 怎么解决 解决思路如何 多年后回头看看自己有没有成长...