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

前端导出excel表格

引入xlsx插件，不然应该是运行不起来的(xlsx无样式)

样式使用 xlsx-js-style 或 xlsx-style

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

npm i exceljs
exceljs中文文档

导出

例子

javascript 复制代码

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'}]

<Button
  type="primary"
  ghost
  onClick={() =>
    ExportExcel(
      columns,
      dataSource,
      `sheet页名自定义`,
      `fileName 文件名称自定义`,
      'xls',
      titleArr,
      merges
    )
  }
>
  导出
</Button>

ExportExcel函数封装

javascript 复制代码

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) => {
  //根据自身实际情况处理 children
    if (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();
  //新sheet
  var newFileSheet = XLSX.utils.aoa_to_sheet(dataArr);
  //合并
  newFileSheet['!merges'] = merges;
  //sheet添加到文件
  XLSX.utils.book_append_sheet(newFile, newFileSheet, sheetName);
  // 导出 Excel
  XLSX.writeFile(newFile, `${fileName}.xls`);
};

总结

XLSX.utils.book_new()创建新文件
XLSX.utils.aoa_to_sheet 新sheet表
merges数组表示对行和列进行合并，c表示column(列)，r表示row(行)，s表示start(开始)，e表示end(结束)，索引从0开始