react+antd 导出excel

本人java程序员一枚，奈何还要天天写前端代码，公司选择的前端框架是react+redux+阿里的蚂蚁组件。java导出excel无非就是用到apache的poi。如何用react实现导出excel呢？

首先需要构造exportdata：

const {fileName,header} = this.props;
        const exportdata = [];
        let k = 0;
        let k1 = 0;
        header.forEach(h => {
            const _theader = h.theader
                .map((item, i) => {
                    let position = String.fromCharCode(65 + i);
                    console.log("i=",i);
                    console.log("k=",k);
                    if(i >= 26){
                        position = 'A' + String.fromCharCode(65 + k);
                        k ++;
                    }
                    if(i === h.theader.length - 1){
                        k = 0;
                    }
                    console.log("position",position);

                    return Object.assign(
                        {},
                        { key: item.key, title: item.title, position: position + 1 })
                })
                .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { key: next.key, v: next.title } }), {});
            const _tbody = h.tbody
                .map((item, i) => {
                    return h.theader.map((key, j) => {
                    let position = String.fromCharCode(65 + j);
                        if(j >= 26){
                            position = 'A' + String.fromCharCode(65 + k1);
                            k1 ++;
                        }
                        if(j === h.tbody.length - 1){
                            k1 = 0;
                        }
                    return Object.assign(
                        {},
                        { content: item[key.key], position: position + (i + 2) })
                    })
                })
                .reduce((prev, next) => prev.concat(next))
                .reduce((prev, next) => Object.assign({}, prev, { [next.position]: { v: next.content } }), {});

            const output = Object.assign({}, _theader, _tbody);
            const outputPos = Object.keys(output);
            const ref = `${outputPos[0]}:${outputPos[outputPos.length - 1]}`;

            exportdata.push({
                sheetName:h.sheetName,
                output: output,
                ref: ref
            })
        });

这里定义的exportdata就是最终导出excel所需的数据结构，为了实现定制化和组件化，这里用户可以自定义传入表头；

解释一下header变量的含义：

header可以传入多组导出数据，比如我们需要导出一个含有多个sheet的excel表格，

例如：header={[

{theader:columns,tbody:rowData,sheetName:"sheet1"},

{theader:columns2,tbody:rowData2,sheetName:"sheet2"}

]}

构造完exportdata之后就可以创建sheet：

const sheets = {};
        exportdata.forEach(ex => {
            sheets[ex.sheetName] = Object.assign(
                {},
                ex.output,
                {
                    '!ref': ex.ref,
                }
            );
        });

        const wb = {
            SheetNames: exportdata.map(ex => ex.sheetName),
            Sheets: sheets
        };
XLSX.writeFile(wb, fileName);

需要注意的是需要引入XLSX模板：import XLSX from 'xlsx'; 如果没有可以用node安装一下先：npm install xxx