papaparse读取远端文件,中文乱码问题。

papa Parse从远端服务器读取csv文件进行解析时,若文件中有中文,会出现中文乱码的情况。
这个插件比较强大,解析上基本没有什么大问题,但仍然不是十分完善。问题如下:
1.文件最末尾的空行没有自动去除,可能会导致表单填多一点空数据;
2.不能自动识别UTF8与GBK,中文解析可能乱码;
3.UTF8编码下, \r\n与\n混用时有可能会解析出问题,这个是PapaParse解析的算法问题,还请高手去其官方github提供修复。

为什么会产生中文乱码呢?
如果表格内容有中文的话,就是个大问题了。因为一般网页的编码是UTF8,导出的表格也会是UTF8编码格式,如果不修改直接上传则为UTF8。但是如果修改,Windows平台下的常用表格软件包括Office和WPS全都将其转换成GBK编码。如果程序没有自动识别编码处理,将有很大概率导致乱码。
另一方面,如果网页使用GBK编码格式下载,也不能确保用户上传的文件就一定是GBK,因为MAC系统用的是UTF8,可能本来GBK的在修改后就成了UTF8了。

说一说我的解决方案:
因为我是从远端的地址拿到的文件进行解析。通过papaparse的解析远端url文件的方式进行调用,发现返回中有乱码。通过直接获取url地址将文件下载下来并且打开,发现文件是正常的,排除了是因为后端的原因,应该是编码的问题。
解决思路有两个:
思路一.将拿到的乱码数据进行转换,将其转化成正常的数据,但是没有找到一个能将乱码数据转化成正常数据的方法,故第一个方案被pass了。
思路二:先将服务器上的文件获取到,然后用FileReader根据编码格式不同按不同的编码格式读取到文件数据,最后将用papaparse解析。
解决:首先我们需要安装识别编码的插件,jschardet,通过npm安装,在页面中引入。
jschardet.detect(str) //ASCII
通过实践发现,传普通字符串进去全部都是识别为ASCII编码。怎么办呢?
莫慌莫慌,我们不是要读取本地文件拿来解析吗?再看看火狐的MDN文档除了readAsText()读取为字符串以外还有什么方法可以用。有个readAsBinaryString(),但是并不是标准的H5读取方法,有些浏览器可能不支持。再看有一个readAsDataURL(),这什么东西呢,试试便知道。结果得到一串这样的东西

data:text/csv;base64,NiywzczYwPvM2KGksLIKMyzN0LDdtvLLuaGkx+0KOCy2xc3+oaS3xrDCxMkK

改文件再试多几次,原来是这样子的:前面的 data:text/csv;base64, 是固定字符串,仅对火狐,chrome和IE前面的是 data:;base64, ,后面的那一串是文件内容经过base64编码而成。那么把后面这个一串解码出来看看,IE>=10、火狐、chrome有原生的base64解码函数 atob()。然后就得到了一个英文正常,中文全是乱码的字符串了,而且这个字符串的乱码看起来不像UTF8也不像GBK。那么很可能这就是十六进制码了吧,用jschardet检测一下,成功了!(其中参考文章https://blog.csdn.net/ccc82284/article/details/54313626)
附上代码:

//  识别编码
checkEncoding (base64Str) {
	  // 这种方式得到的是一种二进制串
      let str = atob(base64Str.split(';base64,')[1])
      // 要用二进制格式
      let encoding = jschardet.detect(str).encoding
      if (encoding === 'windows-1252') {
      //有时会识别错误(如UTF8的中文二字)
        encoding = 'ANSI'
      }
      return encoding
    }

papaparse读取远端文件,中文乱码问题。_第1张图片
以上就是针对乱码作出的一种解决方案,有问题可以在评论中留言,如果更好的方案也可评论。

你可能感兴趣的:(前段js实用方法)