说明

完整 Excel 导出工具，支持多 key 值合并、表头自定义对齐、空行合并等功能

安装

npm install xlsx-js-style
npm install exportjsontoexcel

配置

由于使用了可选链(a?.b)，需要安装如下 loader，已经安装可忽略

npm install @babel/plugin-proposal-optional-chaining

1. 安装后在 babel.config.js 中添加配置

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    // https://babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining.html
    '@babel/plugin-proposal-optional-chaining', // 主要配置
  ]
}

2. 视情况在 vue.config.js 添加

module.exports = {
  // 其他已有配置...
  transpileDependencies: [
    // 强制转译 exportjsontoexcel 包
    'exportjsontoexcel' // 主要配置
  ],
  // 如果项目中有 chainWebpack 配置，确保没有排除该包的转译
  chainWebpack: config => {
    // 无需额外配置，transpileDependencies 已足够
  }
}

使用

import exportJsonToExcel from 'exportjsontoexcel';

const tableData = [
  {
    'areaCode': '320100',
    'dangerCount': '37',
    'drivingSchoolCount': '0',
    'goodsCount': '1705',
    'orgName': 'xx市江xxx区',
    'passengerCount': '4',
    'passengerStationCount': '0',
    'statisticalItemName': '企业数',
    'summaryCount': '1708',
    'test': {
      aa: '11'
    }
  },
  {
    'areaCode': '320100',
    'dangerCount': '0',
    'drivingSchoolCount': '0',
    'goodsCount': '0',
    'orgName': 'xx市江xxx区',
    'passengerCount': '0',
    'passengerStationCount': '0',
    'statisticalItemName': '主要负责人数',
    'summaryCount': '0',
    'test': {
      aa: '22'
    }
  },
  {
    'areaCode': '320100',
    'dangerCount': '0',
    'drivingSchoolCount': '0',
    'goodsCount': '0',
    'orgName': 'xx市江xxx区',
    'passengerCount': '0',
    'passengerStationCount': '0',
    'statisticalItemName': '安全生产管理人员数',
    'summaryCount': '0',
    'test': {
      aa: '33'
    }
  },
  {
    'areaCode': '320100',
    'dangerCount': '0',
    'drivingSchoolCount': '0',
    'goodsCount': '0',
    'orgName': 'xx市江xxx区',
    'passengerCount': '0',
    'passengerStationCount': '0',
    'statisticalItemName': '两类人员数',
    'summaryCount': '0',
    'test': {
      aa: '44'
    }
  }
]





exportJsonToExcel(tableData, {
  headers: [
    {
      property: '',
      title: '统计时间：2025年7月22日',
      alignment: { horizontal: 'left' },
      children: [
        { property: 'orgName', title: '管辖机构', width: 20 },
        { property: 'statisticalItemName', title: '统计项', width: 20 },
        { property: 'summaryCount', title: '汇总', width: 20 },
        { property: 'passengerCount', title: '道路旅客运输', width: 20 },
        { property: 'goodsCount', title: '道路普货运输', width: 20 },
        { property: 'dangerCount', title: '道路危险品运输', width: 20 },
        { property: 'passengerStationCount', title: '道路客运站', width: 20 },
        { property: 'drivingSchoolCount', title: '一级机动车驾驶员培训机构', width: 30 },
        { property: 'test.aa', title: '多级属性的使用', width: 30 }
      ]
    }
  ],
  // 行合并配置：自动合并分类相同的行
  rowMergeRules: [{ key: 'orgName', merge: true }],
  filename: '全省两类人员考核情况统计表',
  sheetName: '总数（省）',
  mainTitle: '全省两类人员考核情况统计表',
  // 表格底部添加数据说明
  notes: [
    '这是一条非常长的备注信息，用于测试文本换行功能。当文本长度超过表格宽度时，',
    '应该自动换行显示，而不是撑大表格列宽。这条备注会被合并成一个单元格，',
    '并且保持与表格主体相同的宽度。'
  ],
  headerStyle: {
    font: {
      sz: 12,
      name: '仿宋',
      color: { rgb: '000000' },
      bold: true
    },
    fill: {
      fgColor: { rgb: 'F2F2F2', color: { rgb: '000000' } }
    },
    alignment: {
      vertical: 'center',
      horizontal: 'center'
    }
  },
  mainTitleStyle: {
    font: {
      sz: 14,
      name: '仿宋',
      color: { rgb: '000000' },
      bold: true
    },
    alignment: {
      vertical: 'center',
      horizontal: 'center'
    }
  },
  // 完全自定义单元格样式
  getCellStyle: (rowIndex, colIndex, rowData) => {
    let style = null

    // 偶数行背景色（斑马线）
    if (rowIndex % 2 !== 0) {
      style = {
        fill: { fgColor: { rgb: 'eeeeee' } }
      }
    }

    return style
  }
})