我們經常會遇到各種文件上傳，比如照片批量上傳，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) { //上傳成功23console.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><Modaltitle="導入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

• 點擊 “上傳文件”

總結

以上是生活随笔為你收集整理的js导入，导出exel表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。