文件导入解析时兼容utf-8和gbk编码以避免乱码
场景:
由于Mac保存csv文件默认utf-8编码 ,
window则是gbk编码
同样是解析csv文件,Reader.readAsText()默认应该是以uff-8方式解码的,因此遇到gbk编码的文件读取时就会导致乱码
解决:
方案一,记事本打开,另存为,修改编码格式统一
方案二,先判断是否是utf-8编码,不是则一律按照gbk格式编码(这里有很多种编码格式,用jschardet等插件应该就能判断出具体是哪种编码格式,我这里只需要兼容utf-8和gbk两种,就简单实现一下了)
简单判断一下是否乱码:看是否含有�(这里我没有找到更准确的判断方案,但一般情况还是足以应对了)
const reader = new FileReader();
reader.readAsText(file.file);//下发读取文件内容的指令,file可以通过<input type="file">,得到dom元素后
//读取文件中,当心,这是一个异步操作
reader.onload = (e) => {
this.encoding = (e.target.result as string).indexOf("�") === -1?'utf-8':'gbk';// 只能粗略判断,如果不是utf8,就认为是gbk编码格式
const reader1 = new FileReader();
reader1.readAsText(file.file,this.encoding);
reader1.onload = (load)=>{
。。。。。 //拿到解析的内容后要进行的操作
}
}
总结:
1.文件读取流程
var reader = new FileReader();
reader.readAsText( files[0] ); //以文本格式读取
reader.onload = function(evt){
var data = evt.target.result; //读到的数据
console.log(data);
}
2.设置编码格式
reader.readAsText( file,encodeType );
3.简单判断是否乱码(精确判断用插件,好像utf-8与gbk区别在于多了BOM头,但我用这种方式判断失败了,希望大佬路过能指点一下)
res.indexOf("�") === -1?
参考:
http://www.disksoft.net/article/396420.html
https://www.cnblogs.com/batsing/p/csv2.html
https://www.geek-share.com/detail/2791976826.html
https://www.jianshu.com/p/e30902489cce
https://segmentfault.com/a/1190000038670031