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);
        }
  });
}

这个插件比较强大，解析上基本没有什么大问题，但仍然不是十分完善。问题如下：

1. 文件最末尾的空行没有自动去除，可能会导致表单填多一点空数据；
2. 不能自动识别UTF8与GBK，中文解析可能乱码；
3. 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;
      }
    }

借鉴原文