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) {  //上传成功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表格相关推荐

com.alibaba.easyexcel导出指定的列_使用Python导入导出Excel表格
这篇文章的目的是讲解使用python导入导出Excel表格,目前还不涉及数据处理,主要实现为数据的展示. 第一步,准备材料 python3.8的安装包一个Excel表格第二步,安装软件 pytho ...
java 导入导出excel表格
java 导入导出excel表格业务上有需求上传excel表格并读取内容,本文记录一下该方法表格导入引入相应的工具包 <dependency><groupId>cn.af ...
java io导出excel表格_Java IO 导入导出Excel表格
1.将excel导入到内存 1. 调用工作簿Workbook的静态方法getWorkbook(),获得工作簿Workbook对象 InputStream in = new FileInputStrea ...
js网页导出excel表格文件
下载地址 js网页导出excel表格文件,没有使用任何第三方js类库,简单的实现table数据导出效果. dd:
使用最新的poi-4.1.0.jar导入导出Excel表格——读取Excel表格数据用法
使用最新的poi-4.1.0.jar导入导出Excel表格--读取Excel表格数据用法其中主要的一点心得就是在switch语句哪里进行读取数据转换时,我看到网上的一些用法都是使用 HSSFCell ...
解决导入导出Excel表格文字乱码问题
解决导入导出Excel表格文字乱码问题参考文章: (1)解决导入导出Excel表格文字乱码问题 (2)https://www.cnblogs.com/minjh/p/12299920.html 备忘 ...
js导入导出总结与实践
在上一篇文章中JavaScript中AMD和ES6模块的导入导出对比,偏向于理论层面,还有一些同学在微信群里或是私下里针对一些问题进行了沟通,所以有了这一篇文章,对js的导入导出进行总结和实践当直接 ...
【JS】导出合并表格
[JS]导出合并后的单元格的表格安装依赖 npm install element-ui -S npm install xlsx npm install file-saver 代码 <templ ...
JS实现导出网页表格为Excel
首先声明:这篇是转载然后稍加修改的,原文下载表格会出现乱码,因此做了一些改进. 原文地址:js实现table导出Excel,保留table样式 PS:实际导出并不是真正的Excel文件,实际上一个ht ...

js导入，导出exel表格

导出excel表格

导入excel表格

效果：

js导入，导出exel表格相关推荐

最新文章

热门文章