【已解决】纯前端导入excel文件

1.组件内容

import "antd/es/upload/style";
import _Upload from "antd/es/upload";
import "antd/es/button/style";
import _Button from "antd/es/button";
import "antd/es/icon/style";
import _Icon from "antd/es/icon";
import _extends from "babel-runtime/helpers/extends";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
/* eslint-disable no-empty */
/* eslint-disable func-names */
/*

 */
import React, {Fragment} from "react";
import PropTypes from "prop-types";
import { set } from "lodash";

import { excel } from "sei-utils";
import LocaleReceiver from "../LocaleProvider/LocaleReceiver";
import zhCN from "./locales/zh-CN";

var ImportButton = function (_React$Component) {
  _inherits(ImportButton, _React$Component);

  function ImportButton() {
    var _temp, _this, _ret;

    _classCallCheck(this, ImportButton);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.handleImportExcel = function (_ref) {
      var file = _ref.file;

      // const { errMsg } = this.locale;
      var _this$props = _this.props,
          onChange = _this$props.onChange,
          multiSheet = _this$props.multiSheet;

      var fileReader = new FileReader();
      if (fileReader.readAsBinaryString === undefined) {
        // 解决ie11 大文件堆栈溢出的问题（for arrayBufferToString）
        FileReader.prototype.readAsBinaryString = function (fileData) {
          var binary = "";
          var pt = this;
          var reader = new FileReader();
          reader.onload = function () {
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;
            for (var i = 0; i < length; i += 1) {
              binary += String.fromCharCode(bytes[i]);
            }
            pt.content = binary;
            // console.log("binary length:" + binary.length);
            // 页面内data取pt.content文件内容
            set(pt, "target.result", binary);
            pt.onload(pt);
          };
          reader.readAsArrayBuffer(fileData);
        };
      }
      fileReader.onload = function (event) {
        try {
          var result = event.target.result;

          if (onChange) {
            onChange(excel.import_excel_to_json(result, !multiSheet));
          }
        } catch (e) {
          // console.log(e)
        }
      };
      fileReader.readAsBinaryString(file);
    }, _this.getUploadProps = function () {
      return {
        beforeUpload: function beforeUpload() {
          return false;
        },
        showUploadList: false,
        onChange: _this.handleImportExcel
      };
    }, _this.handleClick = function (e) {
      var beforeImport = _this.props.beforeImport;

      if (beforeImport) {
        var result = beforeImport();
        if (!result) {
          e.stopPropagation();
        }
      }
    }, _this.renderCmp = function (contextLocale) {
      var _this$props2 = _this.props,
          btnType = _this$props2.btnType,
          iconType = _this$props2.iconType,
          customLocale = _this$props2.locale,
          label = _this$props2.label,
          disabled = _this$props2.disabled;

      var locale = _extends({}, contextLocale, customLocale);
      _this.locale = locale;

      return React.createElement(
        _Upload,
        _this.getUploadProps(),
        React.createElement(
          _Button,
          { disabled: disabled, type: btnType, onClick: _this.handleClick },
          React.createElement(_Icon, { type: iconType }),
          " ",
          label || locale.label
        )
      );
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  ImportButton.prototype.render = function render() {
    return React.createElement(
      LocaleReceiver,
      { localeContext: "ImportButton", defaultLocale: zhCN },
      this.renderCmp
    );
  };

  return ImportButton;
}(React.Component);

ImportButton.propTypes = {
  /** 导入excel文件的回调事件 */
  onChange: PropTypes.func,
  /** icon 类型 */
  iconType: PropTypes.string,
  /** 按钮类型 */
  btnType: PropTypes.string,
  /** 按钮标签 */
  label: PropTypes.string,
  /** 导入前的钩子函数 */
  beforeImport: PropTypes.func,
  /** 多个excel工作区 */
  multiSheet: PropTypes.bool,
  /** 是否禁用 */
  disabled: PropTypes.bool
};
ImportButton.defaultProps = {
  onChange: null,
  iconType: "upload",
  btnType: "",
  label: "导入数据",
  beforeImport: null,
  multiSheet: false,
  disabled: false
};
export default ImportButton;

2如何引用

<ImportButton  onChange={(data) => console.log("这就是导入的文件list",data)} label={'导入excel'}/>