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也就實現了 有興趣的同窗能夠嘗試下。