在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){
    //你的操作
})