封装导出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;