封装导出excel的代码

2021-10-27  本文已影响0人  Asuler

使用方法:
类似ant design里table的那种格式
columns,和dataSource都是这种格式

设置range:因为这个导出如果dataSource里面有多余的字段也会跟着一起导出,所以要设置range,通过ws['!ref']来设定
范围在表格的最左上角,到columns对应的最右下角,通过XLSX.utils.encode_cell计算出对应的位置

import XLSX from 'xlsx';

const createExcel = (columns, dataSource, name) => {
    // 键值对映射成中文的title和dataIndex的Map
    const cnHeader = columns.reduce((prev, next) => ({...prev, [next.dataIndex]: next.title}), {});
    // 这里dataSource.length 不用-1,因为下面加了cnHeader
    const encode_cell = XLSX.utils.encode_cell({c: columns.length - 1, r: dataSource.length });

    const range = `A1:${encode_cell}`;
    const ws = XLSX.utils.json_to_sheet([cnHeader, ...dataSource], {skipHeader: true});
    ws['!ref'] = range;
    const wb = XLSX.utils.book_new();
    // console.log(ws,wb)
    XLSX.utils.book_append_sheet(wb, ws, name);
    XLSX.writeFile(wb, `${name}.xlsx`);
};

export default createExcel;
上一篇 下一篇

猜你喜欢

热点阅读