react下 antd js前端实现在线解析csv文件

大家可能听到这个需求 会有点诧异，正常来说无论解析什么文件 通用做法都是前端传递文件到后端 后端把解析后的数据返回到前端进行展示。但是最近boss给我的需求就是前端在线解析csv文件 并回显到前端，那么js在前端能读取文件吗？
随着H5的出现这个问题就解决了 FileReader 大家可以看下这个文档了解一下 这里就不做描述了。
本地新建一个.csv文件进行测试

数据如上，废话就不多说了 底下是实现代码

import React from 'react';
import { Upload, Button, Icon } from 'antd';
import Papa from 'papaparse'; // 解析cvs插件 市面上使用较多的
import jschardet from 'jschardet'; // 编码识别

export default class Csv extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      csvParseData: [],
    };
  }
  // 检查编排
  checkEncoding = (base64Str) => {
    //这种方式得到的是一种二进制串
    const str = atob(base64Str.split(";base64,")[1]); // atob  方法 Window 对象 定义和用法 atob() 方法用于解码使用 base-64 编码的字符
    //要用二进制格式
    let encoding = jschardet.detect(str);
    encoding = encoding.encoding;
    // 有时候会识别错误
    if(encoding == "windows-1252"){
      encoding = "ANSI";
    }
    return encoding;
  }
  render() {
    const _this = this;
    const props = {
      beforeUpload: file => {
        const fReader = new FileReader();
        fReader.readAsDataURL(file); //  readAsDataURL 读取本地文件 得到的是一个base64值
        fReader.onload = function(evt){// 读取文件成功
          const data = evt.target.result;
          const encoding = _this.checkEncoding(data);
          //papaparse.js 用来解析转换成二维数组
          Papa.parse(file, {
            encoding: encoding,
            complete: function(results) {        // UTF8 \r\n与\n混用时有可能会出问题
              const res = results.data;
              if(res[res.length - 1] === ""){    //去除最后的空行 有些解析数据尾部会多出空格
                res.pop();
              }
              // 当前res 就是二维数组的值 数据拿到了 那么在前端如何处理渲染 就根据需求再做进一步操作了
              _this.setState(res);
            }
          });

        }
        return false;
      },
    };
    return (
      <Upload {...props}>
        <Button>
          <Icon type="upload" /> 点击上传csv
        </Button>
      </Upload>
    );
  }
}

如上图就是最终拿到的值 和我们新建测试的csv文件数据是一致的 中文也没有出现乱码 前端解析csv也就实现了 有兴趣的同学可以尝试下。