在vue中,解决papaparse把.csv转成json格式中文乱码问题,并把处理过程进行封装

前后效果图:

一.出现这类问题的原因
编码格式的问题,默认处理时utf8格式,但可能出现GBK,GB2312(我的就是)…等格式

二.解决的方法
识别编码,告诉papaparse的encoding属性

三.需要的插件jschardet
只能检测编码，不能把乱码转成原文

四.创建一个文件夹和文件
文件夹名: csv-arr
文件名: index

五.index.js的代码为:

import jschardet from 'jschardet'
import Papa from 'papaparse'

/**
 * csv file to 2D arr
 * */
// 检查编码，引用了 jschardet
function checkEncoding(base64Str) {
     
  // 这种方式得到的是一种二进制串
  var str = atob(base64Str.split(';base64,')[1])
  // console.log(str);
  // 要用二进制格式
  var encoding = jschardet.detect(str)
  encoding = encoding.encoding
  // console.log( encoding );
  if (encoding === 'windows-1252') {
     	// 有时会识别错误（如UTF8的中文二字）
    encoding = 'ANSI'
  }
  return encoding
}
function csv(file) {
     
  return new Promise((resolve, reject) => {
     
  // let file = this.$refs.csvData.files[0]
    const fReader = new FileReader()
    fReader.readAsDataURL(file)
    fReader.onload = function(evt) {
     
      const data = evt.target.result
      // console.log( data );
      const encoding = checkEncoding(data)
      // console.log(encoding);
      // 转换成二维数组，需要引入Papaparse.js
      Papa.parse(file, {
     
        encoding: encoding,
        complete: function(results) {
     		// UTF8 \r\n与\n混用时有可能会出问题
          // console.log(results)
          const res = results.data
          if (res[ res.length - 1 ] === '') {
     	// 去除最后的空行
            res.pop()
          }
          resolve(res)
        }
      })
    }
  })
}
export default {
     
  csv
}

六.在需要把.csv转成json的.vue文件中

<template>
    <input type="file" name="csvfile" ref="csvData" />
    <input type="button" @click="csv()" value="JS转换"/>
</template>
<script>
import csv2arr from '@/assets/csv-arr'
export default {
     
  methods: {
     
    csv() {
     
      csv2arr.csv(this.$refs.csvData.files[0]).then((res)=>{
     
            console.log('我的数据', res)
      })      
    }
  }
}
</script>

另外(可不看):
要是不使用promise,如何将js回调函数中的数据返回给最外层函数？
一个小例子,代码为:

function getData(url,callback){
     
    http.get(url,function(res){
     
        var body='';
        res.on('data',function(str){
     
            body+=str;
        });
        res.on('end',function(){
     
            var result=JSON.parse(body);
            //将result返回到getData外面
            callback && callback(result)
        })
    });
}
//调用
getData(url,function(data){
     
    //你的操作
})