前端导出table数据实现（支持多级表头）

tableToExcel 方法文档

简介

[tableToExcel](file:///f:/code/my-vue2.0-project/src/utils/tableToExcel.js#L42-L42) 是一个用于将前端表格数据导出为 Excel 文件的工具函数。它支持单级表头和多级表头（嵌套表头），并提供了多种自定义选项，如边框样式、列宽自动调整和文本换行等。

功能特性

• 支持单级表头和多级表头导出
• 自动计算并设置列宽
• 支持添加单元格边框
• 支持文本换行显示
• 支持单元格水平和垂直居中对齐
• 支持复杂表头的合并单元格处理

使用方法

导入

import {
   
    tableToExcel } from '@/utils/tableToExcel.js'

基本用法

// 基本数据导出
const tableData = [
  {
   
    name: '张三', age: 25, address: '北京市' },
  {
   
    name: '李四', age: 30, address: '上海市' }
];

const columns = [
  {
   
    prop: 'name', label: '姓名' },
  {
   
    prop: 'age', label: '年龄' },
  {
   
    prop: 'address', label: '地址' }
];

tableToExcel(tableData, columns, '用户数据.xlsx');

多级表头用法

// 多级表头导出
const tableData = [
  {
   
    name: '张三', age: 25, phone: '13800138000', email: 'zhangsan@example.com' },
  {
   
    name: '李四', age: 30, phone: '13900139000', email: 'lisi@example.com' }
];

const columns = [
  {
   
    prop: 'name', label: '姓名' },
  {
   
   
    label: '联系信息',
    children: [
      {
   
    prop: 'phone', label: '电话' },
      {
   
    prop: 'email', label: '邮箱' }
    ]
  },
  {
   
    prop: 'age', label: '年龄' }
];

tableToExcel(tableData, columns, '用户详细数据.xlsx');

参数说明

参数名	类型	必填	默认值	说明
tableData	Array	是	-	表格数据数组
columns	Array	是	-	列配置信息
filename	String	否	‘data.xlsx’	导出的文件名
options	Object	否	-	导出选项

columns 配置项

columns 参数是一个数组，每个元素代表一列的配置信息：

单级表头配置

{
   
   
  prop: 'name',      // 对应数据中的字段名
  label: '姓名'      // 表头显示的文本
}

多级表头配置

{
   
   
  label: '分组名称',   // 分组表头显示的文本
  children: [        // 子列配置
    {
   
    prop: 'phone', label: '电话' },
    {
   
    prop: 'email', label: '邮箱' }
  ]
}

options 配置项

属性	类型	默认值	说明
addBorder	Boolean	true	是否为单元格添加边框
autoWidth	Boolean	true	是否自动调整列宽
wrapText	Boolean	true	是否允许文本换行

使用示例

1. 基础导出

const tableData = [
  {
   
    id: 1, name: '产品A', price: 100 },
  {
   
    id: 2, name: '产品B', price: 200 }
];

const columns = [
  {
   
    prop: 'id', label: 'ID' },
  {
   
    prop: 'name', label: '产品名称' },
  {
   
    prop: 'price', label: '价格' }
];

tableToExcel(tableData, columns, '产品清单.xlsx');

2. 自定义选项导出

const tableData = [
  {
   
    name: '张三', desc: '这是一段很长的描述文本\n包含换行符' }
];

const columns = [
  {
   
    prop: 'name', label: '姓名' },