在vue中,解决papaparse把.csv转成json格式中文乱码问题,并把处理过程进行封装
前后效果图:一.出现这类问题的原因编码格式的问题,默认处理时utf8格式,但可能出现GBK,GB2312…等格式二.解决的方法识别编码,告诉papaparse三.需要的插件jschardet只能检测编码,不能把乱码转成原文四.创建一个文件夹...
·
前后效果图:
一.出现这类问题的原因
编码格式的问题,默认处理时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){
//你的操作
})
更多推荐
已为社区贡献11条内容
所有评论(0)