使用xlsx-js-style表格导出，合计，单元格居中，多级表头合并，添加序号

 

引入插件
import XLSXS from 'xlsx-js-style';
import FileSaver from 'file-saver';

插件版本
"xlsx-js-style": "^1.2.0"
"file-saver": "^2.0.5",

const exportExcel = () => {
  // 第一列添加序号
  state.tableData  = state.tableData.map((row, index) => {
    return Object.assign({}, { index: index + 1 }, row);
  });

  //转换为一个二维数组
  let body = state.tableData.map(x => ([x.index,x.dwmc, x.gfje, x.zjgf, x.zggf]))

  let tableLength = state.tableData.length + 2

  /* 定义表头
      定义表头，每一行即是一个数组，数组中的元素即是一个个单元格内容。
  */
  const header = [
    [
    {
      v: '表头标题',
      t: 's',
    },
  ],
  ['序号','单位','金额','其中处级','职工']
  ]

  //表尾第三列合计
  const tail = ['', '合计', { f: `SUM(C3:C${tableLength})`}]

  // 将定义好的表头表尾添加到 body 中
  body.unshift(...header);
  body.push(tail)

// aoa_to_sheet 将二维数组转成 sheet
const sheet = XLSXS.utils.aoa_to_sheet(body);

// 设置合并单元格 s是起始位，e结束位
const merges = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 4 } },]
sheet['!merges'] = merges; // 将merges添加到sheet中
  
// 设置列宽行高
const cols = [ { wch: 10 },{ wch: 25 },{ wch: 20 },{ wch: 20 },{ wch: 20 } ];
sheet['!cols'] = cols; // 将cols添加到sheet中
const rows = [ { hpx: 35 },{ hpx: 25 },{ hpx: 20 }]
sheet['!rows'] = rows; // 将rows添加到sheet中，设置行高

// 设置单元格样式
//这里遍历单元格给单元格对象设置属性,s为控制样式的属性
Object.keys(sheet).forEach((key) => {
    if (key.indexOf('!') < 0) {
      sheet[key].s = {
        alignment: {//对齐方式
          horizontal: 'center',//水平居中
          vertical: 'center',//竖直居中
          // wrapText: true,//自动换行
        },
      }
      if (key.indexOf('1') !== -1) {
        sheet[key].s.font = {
          bold: true,
          sz: 16,
        } 
      }
      if (key.indexOf('2') !== -1) {
        sheet[key].s.font = {
          sz: 14,
        } 
      }
    } 
})

//导出
const workbook = XLSXS.utils.book_new();// 创建虚拟的 workbook
XLSXS.utils.book_append_sheet(workbook, sheet, 'sheet1'); // 向 workbook 中添加 sheet
const wbout = XLSXS.write(workbook, {bookType: 'xlsx', type: 'binary'});
  const blob = new Blob([s2ab(wbout)], {type: 'application/octet-stream'});
  FileSaver.saveAs(blob, 'sheet1.xlsx')
  //注意：定义导出 excel 的名称时需要加上后缀 .xlsx

  function s2ab (s) {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 8; i !== s.length; ++i){
      view[i] = s.charCodeAt(i) & 0xFF
    }
    return buf;
  }
}