React xlsx(工具库) 处理表头合并

本文主要是介绍React xlsx(工具库) 处理表头合并，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前端导出excel表格
引入xlsx插件，不然应该是运行不起来的(xlsx无样式)
样式使用 xlsx-js-style 或 xlsx-style

npm i xlsx
xlsx中文文档

插件2 exceljs
npm i exceljs
exceljs中文文档

导出

例子

在这里插入图片描述

import { ExportExcel } from './exportExcel/index';const columns=[{title: 'id',dataIndex: 'item1',},{title: '序号',dataIndex: 'item2',},{title: '合并列1-2',dataIndex: 'a1',children: [{title: '合并列1',dataIndex: 'data1',},{title: '合并列2',dataIndex: 'data2',},],}]//下方 '' 值为要合并项，主体值（'合并列1-2'）放前面，或放上面（'id'）//将表头拆为两行//若要加一个表头（xxxx表格），则为三行 titleArr.splice(0, 0, ['xxxx表格','','']);const titleArr=[['id','序号','合并列1-2',''],['','','合并列1','合并列2']];// 合并
// s 意为 start ，即开始的单元格
// r 是 row ，表示行号，从 0 计起
// c 是 col ，表示列号，从 0 计起 
// e 意为 end，结束
const merges=[
{s:{c:0,r:0},e:{c:0,r:1}}, //合并第一列 第1行至第2行
{s:{c:0,r:2},e:{c:0,r:3}},// 合并第一行  第3个至第4个
]let dataSource=[
{item1:'0',item2:'1',data1:'2',data2:'3'},
{item1:'0',item2:'1',data1:'2',data2:'3'}]<Buttontype="primary"ghostonClick={() =>ExportExcel(columns,dataSource,`sheet页名自定义`,`fileName 文件名称自定义`,'xls',titleArr,merges)}
>导出
</Button>

ExportExcel函数封装

import XLSX from 'xlsx';
/*** zy* @param {*} label 表头-必填-例[{ title: '单位',dataIndex: 'item6',},]* @param {*} data 数据-必填-例[['0001','2017001','天'],['0002','2017002','干']],* @param {*} sheetName sheet页名* @param {*} fileName 文件名称* @param {*} fileType 文件类型-暂只使用xlsx，xls* @param {*} titleArr 表头-必填-例 [['编码','编号','备注']],默认二维数组[[]]* @param {*} merges 合并-选填-{s:{c:0,r:0},e:{c:2,r:0}}, //合并第一行 第1个至第3个*/export const ExportExcel= (label,data,sheetName,fileName,fileType,titleArr = [[]],merges = []
) => {sheetName = sheetName || 'sheet1';fileName = fileName || '导出表';fileType = fileType || 'xls';//组织数据let dataArr = [];let dataIndexArr = [];label.forEach((item) => {//根据自身实际情况处理 childrenif (item?.children && item.children.length) {item.children.forEach((item2) => {dataIndexArr.push(item2.dataIndex);});} else {dataIndexArr.push(item.dataIndex);}});data.forEach((item) => {let itemArr = [];dataIndexArr.forEach((x) => {itemArr.push(item[x]);});dataArr.push(itemArr);});//可以看成一个整体，表头和报表数据都是excel数据，每一行都是一个数组，// 表头在excel顶部 所以表头放最前面 splice(0,0,[])dataArr.splice(0, 0, ...titleArr);//创建新文件var newFile = XLSX.utils.book_new();//新sheetvar newFileSheet = XLSX.utils.aoa_to_sheet(dataArr);//合并newFileSheet['!merges'] = merges;//sheet添加到文件XLSX.utils.book_append_sheet(newFile, newFileSheet, sheetName);// 导出 ExcelXLSX.writeFile(newFile, `${fileName}.xls`);
};