基于xlsx excel 导入功能

import XLSX from 'xlsx';
const DIGIT_REGEX = /^[0-9]*$/;
const NAME_REGEX = /^[\u4e00-\u9fa5]{0,}$/;
const DATE_REGEX = /^\d{4}-\d{1,2}-\d{1,2}$/;
const PHONE_REGEX = /^1[3|4|5|7|8][0-9]{9}$/;
const EMAIL_REGEX = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

/**
 * xlsx 方式导入
 * @param e 所选文件
 * @param headerMap [key => value| 中文 => pojo属性]
 * @param handleResCallback 处理结果集[验证数据合法性]
 * @param errorCallback 处理异常
 */
function importExcel(e, headerMap, handleResCallback, errorCallback){
  const { files } = e.target;
  if (!files) return;
  const file = files[0];
  const fileReader = new FileReader();
  fileReader.readAsBinaryString(file);
  fileReader.onload = event => {
    try {
      const { result } = event.target;
      const wb = XLSX.read(result, { type: 'binary' });
      let res = [];
      for (const sheet in wb.Sheets) {
        if (wb.Sheets.hasOwnProperty(sheet)) {
          const data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          data.forEach(function (item, index) {
            for (let key in item) {
              if (headerMap.has(key)) {
                let columnName = headerMap.get(key);
                data[index][columnName] = data[index][key];
                delete data[index][key];
              }
            }
          });
          res = res.concat(data);
        }
      }
      handleResCallback(res);
    } catch (e) {
      console.log('文件类型不正确');
      errorCallback();
    }
  };
}

/**
 * 数字校验
 * @param value
 * @returns {boolean}
 */
function digitValitor(value) {
  if (!DIGIT_REGEX.test(value)) {
    return false;
  }
  return true;
}

/**
 * 名称校验
 * @param value
 * @returns {boolean}
 */
function nameValitor(value) {
  if (!NAME_REGEX.test(value)) {
    return false;
  }
  return true;
}

/**
 * 日期格式校验
 * @param value
 * @returns {boolean}
 */
function dateValitor(value) {
  if (!DATE_REGEX.test(value)) {
    return false;
  }
  return true;
}

/**
 * 电话号码校验
 * @param value
 * @returns {boolean}
 */
function phoneValitor(value) {
  if (!PHONE_REGEX.test(value)) {
    return false;
  }
  return true;
}

/**
 * 邮箱校验
 * @param value
 * @returns {boolean}
 */
function emailValitor(value) {
  if (!EMAIL_REGEX.test(value)) {
    return false;
  }
  return true;
}

export default {importExcel, digitValitor, nameValitor, dateValitor, phoneValitor, emailValitor};

 

import React, {Component} from 'react';
import ExcelUtil from './ExcelUtil';

class Users extends Component{
    state = {
       headerMap:{}
    }
    
   componentDidMount() {
    const map = new Map();
    map.set("姓名","name");
    map.set("年龄","age");
    map.set("性别","sex");
    map.set("出生日期","birthday");
    this.state.headerMap = map;
   }    

    callback = (res) => {
        console.log("正在开始导入...");
        res.forEach(function (item, index) {
            for (let key in item) {
                let value = item[key];
                if (key == 'name') {
                    if (!ExcelUtil.nameValitor(value)) {
                        console.log("name -----非法");
                        break;
                    }
                }
                if (key == 'age') {
                    if (!ExcelUtil.digitValitor(value)) {
                        console.log("age -----非法");
                        break;
                    }
                }
                if (key == 'birthday') {
                    if (!ExcelUtil.dateValitor(value)) {
                        console.log("birthday -----非法");
                        break;
                    }
                }
            }
        });
        console.log("导入成功...");
        //TODO validate json
        //TODO json TO list<object> insert db
        //TODO refresh table list
    }

    error() {
        console.log("导入失败");
    }
    
    render() {
        
        return (
            <span style={{display:this.state.btnAddDisplay,marginRight:10}}>
               <input type='file' accept='.xlsx, .xls' onChange={(e)=>                               
                {ExcelUtil.importExcel(e, this.state.headerMap, this.callback, this.error)}}/>
            </span>
        )
    }
}