js解析csv文件数据，转换成数组
js导入csv文件，读取文本
这里的关键就是 FileReader，是H5标准里的读取文件的一个标准实现方式，IE10及以上版本以及chrome/firefox/safari等支持。调用方式方法也比较简单，只需要传入文件输入框的DOM，设定读取方式然后绑定回调函数就行了。这里使用的是 readAsText() 的方式，读取为文本格式。
注意：readAsText()会自动把utf8文件的BOM头（如果有的话）去除，其它读取方式要注意手动去除。
var inputFile = document.querySelector("input[type='file']");
inputFile.onchange = (event) => {
var file = inputFile.files[0];
if( typeof(FileReader) !== 'undefined' ){ //H5
var reader = new FileReader();
reader.readAsText(file); //以文本格式读取
reader.onload = function(evt){
var data = evt.target.result; //读到的数据
console.log(data);
}
}else{
alert("IE9及以下浏览器不支持，请使用Chrome或Firefox浏览器");
}
}
最简单的方式导入csv文件，中文解析会乱码
JS导入CSV－－文本解析插件PapaParse.js
var inputFile = document.querySelector("input[type='file']");
inputFile.onchange = (event) => {
var file = inputFile.files[0];
Papa.parse(file, {
complete: function(results) {
console.log("Finished:", results.data);
}
});
}
这个插件比较强大，解析上基本没有什么大问题，但仍然不是十分完善。问题如下：
- 文件最末尾的空行没有自动去除，可能会导致表单填多一点空数据；
- 不能自动识别UTF8与GBK，中文解析可能乱码；
- UTF8编码下， \r\n与\n混用时有可能会解析出问题，这个是PapaParse解析的算法问题，还请高手去其官方github提供修复。
（如果我们能识别编码，这就好解决了）
JS导入CSV－－编码自动识别jschardet.js
查看FileReader文档，除了readAsText()读取为字符串以外，还有readAsBinaryString()（并不是标准的H5读取方法，有些浏览器可能不支持）、readAsDataURL()
使用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检测一下，成功了！
image.png
总结整理
到这里，我们已经用第三方的JS解决了最大的两个难题，编码识别和CSV解析。那么就把这些整合一下，封装成一个更方便调用的方法吧
var inputFile = document.querySelector("input[type='file']");
inputFile.onchange = (event) => {
// console.log(event);
var file = inputFile.files[0];
csv2arr(function(res){
console.log(res)
}, file);
}
function csv2arr(callback, file) {
var fReader = new FileReader();
fReader.readAsDataURL(file);
// 显示进度
var progress = document.querySelector("progress");
progress.max = file.size;
progress.value = 0;
fReader.onprogress = (event) => {
progress.value = event.loaded;
}
fReader.onload = function (evt) {
var data = evt.target.result;
// console.log( data );
var encoding = checkEncoding(data);
// console.log(encoding);
//转换成二维数组，需要引入Papaparse.js
Papa.parse(file, {
encoding: encoding,
complete: function (results) { // UTF8 \r\n与\n混用时有可能会出问题
var res = results.data;
if (res[res.length - 1] == "") { //去除最后的空行
res.pop();
}
callback && callback(res);
}
});
}
fReader.onerror = function (evt) {
// console.log(evt);
alert("文件已修改，请重新选择(Firefox)\nThe file has changed,please select again.(Firefox)");
}
//检查编码，引用了 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;
}
}
