Excel表格xlsx表格js生成Table

这个文章的内容是文件生成表格，文件生成表格，文件生成表格

这一篇是对应的表格生成文件

适用于各种js框架，这里的ui组件是antd

1. 下载依赖（注意是三个依赖，不要把、复制进去）

antd 、xlsx、js-export-excel

贴出全部代码

import React from "react";
import * as XLSX from 'xlsx';
import {  message, Table, Upload } from 'antd';
import ExportJsonExcel from 'js-export-excel'
import 'antd/dist/antd.css';
const Dragger = Upload.Dragger;
class Excel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],//表格内容
            columns: [],//表格头部
            data: []//excel数据
        };
    }
    uploadFilesChange(file) {
        // 通过FileReader对象读取文件
        const fileReader = new FileReader();
        fileReader.readAsBinaryString(file.file);
        fileReader.onload = event => {
            try {
                const { result } = event.target;
                // 以二进制流方式读取得到整份excel表格对象
                const workbook = XLSX.read(result, { type: 'binary' });
                console.log(workbook)
                // 存储获取到的数据
                let data = {

                };
                // 遍历每张工作表进行读取（这里默认只读取第一张表）
                for (const sheet in workbook.Sheets) {
                    let tempData = [];
                    // esline-disable-next-line

                    // console.log(workbook.Sheets[sheet])
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        console.log(sheet)
                        // 利用 sheet_to_json 方法将 excel 转成 json 数据
                        data[sheet] = tempData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    }
                }
                // let a = Object.keys(data)
                console.log(data["上传模版"])
                //上传成功啦,data为上传后的数据
                this.setState({
                    data:data.Sheet1
                });
                console.log(this.state.data)
                // 最终获取到并且格式化后的 json 数据
                message.success('上传成功！')

            } catch (e) {
                // 这里可以抛出文件类型错误不正确的相关提示
                message.error('文件类型不正确！');
            }

            let columns = [];
            let dataSource = [];
            console.log(this.state.data)
            let keys = Object.keys(this.state.data[0]);
            console.log(keys)
            columns = keys.map((item, index) => {
                return {
                    title: item,
                    dataIndex: item,
                    key: item
                }
            });

            dataSource = this.state.data.map((item, index) => {
                return {
                    key: index.toString(),
                    "门店编码": item["门店编码"],
                    "商品编码": item["商品编码"],
                    "库存数量": item["库存数量"],
                }

            })
            this.setState({
                columns,
                dataSource,
            })
        };
        // 以二进制方式打开文件
    }
    render() {
        const { columns, dataSource } = this.state
        return (
            <div>
                <Dragger name="file"
                    beforeUpload={function () {
                        return false;
                    }}
                    onChange={this.uploadFilesChange.bind(this)}
                    showUploadList={false}>
                    <p className="ant-upload-text">
                        <span>点击上传文件</span>
                        或者拖拽上传
                    </p>
                </Dragger>
                <Table columns={columns} dataSource={dataSource} />
            </div>
        );
    }
}

export default Excel

注意这一段代码要与图片删的名字相对应

dataSource = this.state.data.map((item, index) => {
                return {
                    key: index.toString(),
                    "门店编码": item["门店编码"],
                    "商品编码": item["商品编码"],
                    "库存数量": item["库存数量"],
                 }
     
 })

数据来源