前言

用到的依賴xlsx,js-export-excel,完整復(fù)制粘貼即可看到效果哦~親↓

基礎(chǔ)配置

import React from "react";
import * as XLSX from 'xlsx';
import antd, {Button, message, Table} from 'antd';
import ExportJsonExcel from 'js-export-excel';
const Dragger = antd.upload.Dragger;

主體

export default class Preview extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tableData: [],//表格內(nèi)容
            tableHeader: [],//表格頭部
            data:{}//excel數(shù)據(jù)
        };
    }

    render() {
        return (
            <div>
                <Dragger name="file"
                         beforeUpload={function () {
                             return false;
                         }}
                         onChange={this.uploadFilesChange.bind(this)}
                         showUploadList={false}>
                    <p className="ant-upload-text">
                        <span>點(diǎn)擊上傳文件</span>
                        或者拖拽上傳
                    </p>
                </Dragger>
                <Button type="primary" onClick={this.downloadFileToExcel} style={{ marginBottom: "15px" }}>下載</Button>
                <Table columns={this.state.tableHeader} dataSource={this.state.tableData}/>
            </div>
        );
    }
}

導(dǎo)入部分

uploadFilesChange(file) {
    // 通過FileReader對(duì)象讀取文件
    const fileReader = new FileReader();
    fileReader.onload = event => {
        try {
            const { result } = event.target;
            // 以二進(jìn)制流方式讀取得到整份excel表格對(duì)象
            const workbook = XLSX.read(result, { type: 'binary' });
            // 存儲(chǔ)獲取到的數(shù)據(jù)
            let data = {
                sg_input_rules: []
            };
            // 遍歷每張工作表進(jìn)行讀?。ㄟ@里默認(rèn)只讀取第一張表）
            for (const sheet in workbook.Sheets) {
                let tempData = [];
                // esline-disable-next-line
                if (workbook.Sheets.hasOwnProperty(sheet)) {
                    // 利用 sheet_to_json 方法將 excel 轉(zhuǎn)成 json 數(shù)據(jù)
                    data[sheet] = tempData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                }
            }
            //上傳成功啦,data為上傳后的數(shù)據(jù)
            this.setState({
                data:data.sg_input_rules
            });
            // 最終獲取到并且格式化后的 json 數(shù)據(jù)
            message.success('上傳成功！')
        } catch (e) {
            // 這里可以拋出文件類型錯(cuò)誤不正確的相關(guān)提示
            message.error('文件類型不正確！');
        }
        console.log(this.state.data);
        let columns = [];
        let dataSource = [];
        let keys = Object.keys(this.state.data[0]);
        columns = keys.map((item,index)=>{
            return {
                title:item,
                dataIndex:item,
                key:item
            }
        });
        columns.push( {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <span>
                  <a style={{ marginRight: 16 }}>Invite {record.name}</a>
                  <a>Delete</a>
                </span>
            ),
        },)
        dataSource = this.state.data.map((item,index)=>{
                return {
                    key:index.toString(),
                    "規(guī)則協(xié)議":item["規(guī)則協(xié)議"],
                    "端口":item["端口"],
                    "來源":item["來源"],
                    "策略":item["策略"],
                    "備注":item["備注"],
                    "修改時(shí)間":item["修改時(shí)間"]
                }

        })
        this.setState({
            tableHeader: columns,
            tableData: dataSource,
            }
        )
        console.log(this.state.tableData)
    };
    // 以二進(jìn)制方式打開文件
    fileReader.readAsBinaryString(file.file);
}

導(dǎo)出部分

downloadFileToExcel = () => {
    let dataTable = [];  //excel文件中的數(shù)據(jù)內(nèi)容
    let option = {};  //option代表的就是excel文件
    dataTable  = this.state.data;  //從props中獲取數(shù)據(jù)源
    option.fileName = '下載文檔';  //excel文件名稱
    option.datas = [
        {
            sheetData: dataTable,  //excel文件中的數(shù)據(jù)源
            sheetName: '安全組',  //excel文件中sheet頁名稱
            sheetFilter: ['規(guī)則協(xié)議', '端口', '來源', '策略', '備注','修改時(shí)間'],  //excel文件中需顯示的列數(shù)據(jù)
            sheetHeader: ['規(guī)則協(xié)議', '端口', '來源', '策略', '備注','修改時(shí)間'],  //excel文件中每列的表頭名稱
        }
    ]
    let toExcel = new ExportJsonExcel(option);  //生成excel文件
    toExcel.saveExcel();  //下載excel文件
}

導(dǎo)入前.png

導(dǎo)出后.png

參考

react+antd中使用插件js-export-excel將table數(shù)據(jù)導(dǎo)出為excel文件
React項(xiàng)目中引入并使用js-xlsx上傳插件