react+xlsx+antd 封装导入表格实现数据展示的方法

业务需求:要求前端实现excel导入自动展示在table中

封装核心代码

import   XLSX  from "xlsx";
export function importFile(file,params){
    return new Promise((resolve)=>{
        let files = file.file;
        let fileName = files.name.split('.');
                fileName = fileName[fileName.length - 1].toLowerCase();
        const isXLSX = (files.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (fileName == 'xlsx');
                const isXLS = (files.type === 'application/vnd.ms-excel') || (fileName == 'xls');
        const isLt8M = files.size / 1024 / 1024 < 8;
        if(params && params.option == 'importRobotNick'){
            //机器人昵称导入
            if (!isXLSX && !isXLS) {
                message.error('文件格式错误，请上传xlsx或xls');
            }else{
                if (!isLt8M) {
                    message.error('文件尺寸必须小于 8MB!');
                }
            }
        }
        
        let fileReader = new FileReader();
        fileReader.onload = function(ev) {
            try {
                var dataFile = ev.target.result,
                    workbook = XLSX.read(dataFile, {
                        type: 'binary'
                    }), // 以二进制流方式读取得到整份excel表格对象
                    persons = []; // 存储获取到的数据
            } catch (e) {
                console.log('文件类型不正确');
                return;
            }

            // 表格的表格范围，可用于判断表头是否数量是否正确
            let fromTo = '';
            // 遍历每张表读取
            for (let sheet in workbook.Sheets) {
                if (workbook.Sheets.hasOwnProperty(sheet)) {
                    fromTo = workbook.Sheets[sheet]['!ref'];
                    // console.log(sheet);
                    persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet], {header:1}));
                    break; // 如果只取第一张表，就取消注释这行
                }
            }
            resolve(persons);//表格数据  需要根据业务需求进行整理
        };  
        fileReader.readAsBinaryString(files);
    })          
}

代码使用

import {importFile} from '../../utils/utils.js';
uploadOptionPic(tag,file){
    importFile(file,{option:'importRobotNick'}).then(data=>{
        data = data.splice(2);//数据整理
        ......
        message.success('导入成功');
     }).catch(()=>{
              message.error('导入失败');
              return;
  })
}
beforeUpload=(file)=> {
     let files = [];
     this.setState({
          fileList: [...files]
      })
      return false;
}


         导入