see-materilas-import-sheet

excel等表格文件前端解析

DEMO 列表

前端解析execl等表格文件

参数 说明 类型 默认值
keyArr 对应excel列英文字段 Array []
onBeforImport 文件自定义校验 Function(data: {}) => void () => {}
onImportFile 拿到解析后对json数据处理函数 Function(data: Array) => void () => {}
keyArr参数，主要用于给后端提交数据使用，如excel列字段为"编号"，"姓名"，对应的keyArr值可为['id','name']
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ImportSheet from 'see-materilas-import-sheet';

class App extends Component {
	constructor(props) {
		super(props);
		this.state = {
			importList: []
		};
	}

	checkFile = (file) => {
		console.log(file);
	};
	importFile = (data) => {
		this.setState({
			importList: data
		});
	};
	render() {
		return (
			<div>
				<ImportSheet onBeforImport={this.checkFile} key={1} onImportFile={this.importFile} /> &nbsp;&nbsp;
				<ImportSheet key={2} onImportFile={this.importFile}>
					<span>自定义上传组件</span>
				</ImportSheet>{' '}
				&nbsp;&nbsp;
				<div>{JSON.stringify(this.state.importList)}</div>
			</div>
		);
	}
}

ReactDOM.render(<App />, mountNode);