vue从服务器获取csv文件,前端 VUE 解析 CSV 文件

测试文件及依赖下载

静态依赖

yarn包

yarn add jschardet -s

yarn add papaparse -s

业务代码

template

ref="upload"

action

:limit="1"

:file-list="fileList"

:auto-upload="false"

:http-request="httpRequest"

>

点击上传

method

httpRequest(param) {

let fileObj = param.file; // 相当于input里取得的files

let fReader = new FileReader();

fReader.readAsDataURL(fileObj);

fReader.onload = evt => {

// 检查编码

let encoding = this.checkEncoding(evt.target.result);

// 将csv转换成二维数组

Papa.parse(fileObj, {

encoding,

complete: res => {

// UTF8 \r\n与\n混用时有可能会出问题

let data = res.data;

if (data[data.length - 1] == "") {

//去除最后的空行

data.pop();

}

console.log(data);

}

});

};

},

// 检查编码，引用了 jschardet

checkEncoding(base64Str) {

// 这种方式得到的是一种二进制串

let str = atob(base64Str.split(";base64,")[1]);

// 要用二进制格式

let encoding = jschardet.detect(str);

encoding = encoding.encoding;

if (encoding == "windows-1252") {

// 有时会识别错误(如UTF8的中文二字)

encoding = "ANSI";

}

return encoding;

}