react+antdexcel文件上传预览功能

1. 下载js-xlsx插件

yarn add xlsx 或者 npm install xlsx

2. 在项目中引入（在使用的js文件中引用）

import * as XLSX from 'xlsx';

3. 定义插件，并暴露出去（新建一个js文件用来上传文件并查看）

export default class UploadFile extends Component {

}

4. 定义全局变量

this.state = {
            tableData: [], // table的数据
            tableHeader: [] // table的表头
        }

5. 使用table表格预览数据，Table是使用的ant design

<Table columns={this.state.tableHeader}
                           dataSource={this.state.tableData}
                           style={{marginTop:'20px'}}
                           pagination={{pageSize:'5'}}
                    />

6. 解析文件

uploadFilesChange(file) {
        // 通过FileReader对象读取文件
        const fileReader = new FileReader();
        fileReader.onload = event => {
            try {
                const {result} = event.target;
                // 以二进制流方式读取得到整份excel表格对象
                const workbook = XLSX.read(result, {type: 'binary'});
                // 存储获取到的数据
                let data = {};
                // 遍历每张工作表进行读取（这里默认只读取第一张表）
                for (const sheet in workbook.Sheets) {
                    let tempData = [];
                    // esline-disable-next-line
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        // 利用 sheet_to_json 方法将 excel 转成 json 数据
                        console.log(sheet);
                        data[sheet] = tempData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    }
                }
                const excelData = data.Sheet1;
                const excelHeader = [];
                // 获取表头
                for (const headerAttr in excelData[0]) {
                    const header = {
                        title: headerAttr,
                        dataIndex: headerAttr,
                        key: headerAttr
                    };
                    excelHeader.push(header);
                }
                // 解析后的变量赋值给state，重新渲染table页面
                // message.success('上传成功！')
                this.setState({
                    tableData: excelData,
                    tableHeader: excelHeader,
                });
                console.log(this.state)
            } catch (e) {
                // 这里可以抛出文件类型错误不正确的相关提示
                console.log(e);
                // message.error('文件类型不正确！');
            }
        };
        // 以二进制方式打开文件
        fileReader.readAsArrayBuffer(file.file);
    }

使用 fileReader.readAsBinaryString(file.file);在ie中会报错，改成了fileReader.readAsArrayBuffer(file.file);

全部代码：

import React, {Component} from 'react'
import {Table, Button, Card, Upload, message} from 'antd'
import * as XLSX from 'xlsx';
const { Dragger } = Upload;
export default class UploadFile extends Component {
    constructor() {
        super();
        this.state = {
            tableData: [], // table的数据
            tableHeader: [], // table的表头
            currentRowData:{},
            department:''
        }
    }

    //初始化
    componentWillMount() {
    }
    uploadFilesChange(file) {
        // 通过FileReader对象读取文件
        const fileReader = new FileReader();
        fileReader.onload = event => {
            try {
                const {result} = event.target;
                // 以二进制流方式读取得到整份excel表格对象
                const workbook = XLSX.read(result, {type: 'binary'});
                // 存储获取到的数据
                let data = {};
                // 遍历每张工作表进行读取（这里默认只读取第一张表）
                for (const sheet in workbook.Sheets) {
                    let tempData = [];
                    // esline-disable-next-line
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        // 利用 sheet_to_json 方法将 excel 转成 json 数据
                        console.log(sheet);
                        data[sheet] = tempData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    }
                }
                const excelData = data.Sheet1;
                const excelHeader = [];
                // 获取表头
                for (const headerAttr in excelData[0]) {
                    const header = {
                        title: headerAttr,
                        dataIndex: headerAttr,
                        key: headerAttr
                    };
                    excelHeader.push(header);
                }
                // 解析后的变量赋值给state，重新渲染table页面
                // message.success('上传成功！')
                this.setState({
                    tableData: excelData,
                    tableHeader: excelHeader,
                });
                console.log(this.state)
            } catch (e) {
                // 这里可以抛出文件类型错误不正确的相关提示
                console.log(e);
                // message.error('文件类型不正确！');
            }
        };
        // 以二进制方式打开文件
        fileReader.readAsArrayBuffer(file.file);
    }

    toReturn = () => {
        this.props.history.push("/manage/phone");
    };
    toSubmit = () => {
        const _this = this;
        React.$axios.post('/api/phonebook/upexcel',_this.state.tableData).then((res)=>{
            if (res == '0') {
                message.success("上传成功");
                this.props.history.push("/manage/phone");
            } else {
                message.error("上传失败");
            }
        }).catch((err)=>{
            console.log(err)
        });
    };
    render() {
        return (
            <div>
                <Card style={{height: '680px', textAlign:'left'}}>
                    <Dragger name="file"
                             // action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                             accept=".xls,.xlsx" maxCount={1}
                             beforeUpload={function () {
                                 return false;
                             }}
                             onChange={this.uploadFilesChange.bind(this)}
                             showUploadList={false}
                    >
                        <p className="ant-upload-text">
                            <span>点击上传文件</span>
                            或者拖拽上传
                        </p>
                    </Dragger>
                    <Table columns={this.state.tableHeader}
                           dataSource={this.state.tableData}
                           style={{marginTop:'20px'}}
                           pagination={{pageSize:'5'}}
                    />
                    <div style={{textAlign:'center',marginTop:'20px'}}>
                        <Button onClick={this.toReturn}>返回</Button>
                        <Button style={{marginLeft:'25px'}} onClick={this.toSubmit}
                                className='addbutton' type='primary' >确认</Button>
                    </div>
                </Card>
            </div>
        )
    }
}

参考文章：https://www.cnblogs.com/HackerBlog/p/10563085.html.