js导入，导出exel表格

我们经常会遇到各种文件上传，比如照片批量上传，excel表格上传等等。

---

接下来我会讲解两个东西：

• 导出excel表格
• 导入excle表格

---

导出excel表格

导出excel表格如果需要在后端处理，前端调用接口的话，只需要如下配置即可。

<a href={'接口地址'} download>导出列表</a></Button>

当鼠标经过导出列表的时候即可看到下载的链接

导入excel表格

这里我封装了一个上传文件的方法：

uploadfile.js 组件

import React, { PropTypes, Component } from 'react';
import {Upload, message, Button, Icon,Form } from 'antd';
import FormHandle from './formHandle';

const imageUploaderProps = {
    action: "接口地址"
}

class Uploadfile extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
        fileList: [],
        successdata:{}
      }
  }

  handleChange = (info) => {
    let fileList = info.fileList;
    fileList = fileList.slice(-1);
    
    fileList = fileList.map((file) => {
      if (file.response) {
        file.name = file.originFileObj.name; //获取文件名
      }
      return file;
    });
   
    fileList = fileList.filter((file) => {
      if (file.response) {  //上传成功23
           console.log("success!!!!");
           this.props.getform(file.response);
          //  this.setState({ fileList:[] });
      }
      return true;
    });

    this.setState({ fileList });
  }

  render = () => {
    let {fileList} = this.state;
    const props = {
        action: imageUploaderProps.action,
        onChange: this.handleChange,
        multiple: false
    };
    return (
        <Upload {...props} fileList={this.state.fileList}>
        <Button>
          <Icon type="upload" /> 上传文件
        </Button>
      </Upload>
    )
  }
}

export default Form.create()(FormHandle(Uploadfile));

---

formHandle.js文件

import React, { Component } from 'react';
import _ from 'underscore';

const FormHandle = (Wrapper) => {
  class WrapperComponent extends Component {

    componentWillMount() {
      if (!_.isEmpty(this.props.fieldErrors)) {
        this.handleError(this.props.fieldErrors);
      }
    }

    componentWillReceiveProps(nextProps) {
      if (nextProps.type !== this.props.type) {
        this.doSubmit();
      }
      if (!_.isEqual(this.props.fieldErrors, nextProps.fieldErrors)) {
        this.handleError(nextProps.fieldErrors, nextProps.form.getFieldsValue());
      }
    }

    componentDidMount = () => {
      if (this.props.autoSubmit) {
        this.doSubmit();
      }
    }

    doSubmit = () => {
      this.props.form.validateFields(
        { force: true },
        (err, values) => {
          if (!err) {
            this.props.onSubmit(values);
          }
        },
      );
    }

    handleSubmit = (e) => {
      e.preventDefault();
      this.doSubmit();
      this.props.form.resetFields(); //重置表单
    }

    handleError(errors, fields) {

      if (this.props.handleError) {
        errors = this.props.handleError(errors);
      }

      const fieldErrors = _.mapObject(
        errors,
        (item, key) => ({
          errors: [item],
        }),
      );

      if (fields) {
        const fieldsReset = _.mapObject(fields,
          (item, key) => {
            const errors = fieldErrors[key] ? fieldErrors[key].errors : false;
            if (errors) {
              return {
                value: item,
                errors,
              };
            }
            return {
              value: item,
            };
          },
        );
        this.props.form.setFields(fieldsReset);
      } else {
        this.props.form.setFields(fieldErrors);
      }
    }


    doCancel= () => {
      this.props.onCancel();
    }

    handleCancel = (e) => {
      e.preventDefault();
      this.doCancel();
    }

    clearSearch = (form) => {
      return () => {
        form.resetFields();
        this.doSubmit();
      }
    }

    render() {
      return (<Wrapper
        {...this.props}
        clearSearch={this.clearSearch}
        handleSubmit={this.handleSubmit}
        handleCancel={this.handleCancel}
      />);
    }
  }

  return WrapperComponent;
};

export default FormHandle;

---

一个包含上传组件的模态框 dialoag.js

import React, { PropTypes, Component } from 'react';
import { connect } from 'dva';
import { Input, Icon, Button, Alert,Modal,Row, Col,Form,Upload, message } from 'antd';
import Uploadfile from './uploadfile';
import FormHandle from 'components/decorator/formHandle';

class InlineTagEdit extends React.Component {

  static propTypes = {
    dispatch: PropTypes.func.isRequired
  }

  constructor(props) {
    super(props);
    this.module = "userList";
    this.state = { 
       fordata:{},
       count:0
    };
  }

  handleOk = (e) => { 
  
    /*调用uploadfile组件，从这个子组件返回了总的数据条数，和总的数据*/ 
    
    let count = this.state.count;
    let self = this;

   /*每一个表格导入100条数据，进行批量导入*/
   
    for(let i=0;i<Math.ceil(count/100);i++){
      this.props.dispatch({
        type: `${this.module}/getExcelData`,
        payload:{
            file:this.state.fordata.data.createPath,
            page:i+1,
            pageSize:100
        }
      });
    }
    
    if(this.state.fordata){
      let outputMess = {
        type:false,
        complete:true
      }
      this.props.mess(outputMess);
    }
  }

  /*传给子组件的函数*/
  
  onChildChanged= (newState)=> {
    this.setState({
      fordata: newState,
      count:newState.data.count
    });
  }

  render = () => {
    let {comVisible,fordata} = this.state;
    const { getFieldDecorator } = this.props.form;
    return (
        <div>
            <Modal
            title="导入Excel"
            visible={this.props.visable}
            onOk={this.handleOk}
            >
	            <div>
	              <Uploadfile getform={this.onChildChanged} />
	            </div>
            </Modal>
        </div>
    )
  }
}

export default connect(({ userList }) => ({ userList}))(Form.create()(FormHandle(InlineTagEdit)));

---

效果：

• 点击 “导入excel

• 点击 “上传文件”