vue3 + xlsx 实现导出表格，动态获取表头和数据

针对第三方表格组件（如 vxe-table 或 el-table），通过其提供的 API 获取表头和数据，而不是直接操作 DOM。以下是针对 vxe-table 和 el-table 的通用导出函数封装：

npm install xlsx

1. 封装通用导出函数

import * as XLSX from 'xlsx'/*** 导出表格数据为 Excel 文件* @param {Object} tableRef - 表格组件的 ref 引用* @param {String} fileName - 导出文件名（默认：export.xlsx）* @param {Object} options - 配置项（可选）* @param {Array} options.headers - 自定义表头（可选）* @param {Array} options.dataKeys - 自定义数据字段（可选）*/
export const exportExcel = (tableRef, fileName = 'export.xlsx', options = {}) => {// 获取表头和数据let headers = []let data = []// 判断表格类型并提取数据if (tableRef.$options.name === 'VxeTable') {// vxe-table 处理逻辑headers = tableRef.getColumns().map(col => col.title)data = tableRef.getTableData().fullData} else if (tableRef.$options.name === 'ElTable') {// el-table 处理逻辑headers = tableRef.columns.map(col => col.label)data = tableRef.data} else {throw new Error('不支持的表格组件类型')}// 自定义表头和数据字段（如果传入 options）if (options.headers) {headers = options.headers}if (options.dataKeys) {data = data.map(item => {return options.dataKeys.reduce((obj, key) => {obj[key] = item[key]return obj}, {})})}// 构建工作表数据const worksheetData = [headers, // 表头行...data.map(item => headers.map(header => {// 自动匹配数据字段（假设表头与数据字段一一对应）const key = Object.keys(item).find(k => k.toLowerCase() === header.toLowerCase())return key ? item[key] : ''}))]// 创建 workbookconst workbook = XLSX.utils.book_new()const worksheet = XLSX.utils.aoa_to_sheet(worksheetData)// 添加样式worksheet['!cols'] = headers.map(() => ({ wch: 20 })) // 列宽// 组合并导出XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')XLSX.writeFile(workbook, fileName)
}

2. 在组件中使用

vxe-table 示例

<template><vxe-table ref="tableRef" :data="tableData"><vxe-column field="name" title="姓名" /><vxe-column field="age" title="年龄" /><vxe-column field="city" title="城市" /></vxe-table><button @click="exportData">导出Excel</button>
</template><script setup>
import { ref } from 'vue'
import { exportExcel } from '@/utils/exportExcel'const tableRef = ref(null)
const tableData = ref([{ name: '张三', age: 25, city: '北京' },{ name: '李四', age: 30, city: '上海' }
])const exportData = () => {exportExcel(tableRef.value, '用户数据.xlsx')
}
</script>

el-table 示例

<template><el-table ref="tableRef" :data="tableData"><el-table-column prop="name" label="姓名" /><el-table-column prop="age" label="年龄" /><el-table-column prop="city" label="城市" /></el-table><button @click="exportData">导出Excel</button>
</template><script setup>
import { ref } from 'vue'
import { exportExcel } from '@/utils/exportExcel'const tableRef = ref(null)
const tableData = ref([{ name: '张三', age: 25, city: '北京' },{ name: '李四', age: 30, city: '上海' }
])const exportData = () => {exportExcel(tableRef.value, '用户数据.xlsx')
}
</script>

3. 高级用法

自定义表头和数据字段

const exportData = () => {exportExcel(tableRef.value, '用户数据.xlsx', {headers: ['姓名', '城市'], // 自定义表头dataKeys: ['name', 'city'] // 自定义数据字段})
}

导出特定数据

const exportData = () => {const filteredData = tableData.value.filter(item => item.age > 25)exportExcel(tableRef.value, '用户数据.xlsx', {data: filteredData // 导出过滤后的数据})
}

4. 注意事项

1. 表头与数据字段匹配：

    默认情况下，表头（title 或 label）与数据字段（field 或 prop）需要一一对应。如果表头与字段不一致，可以通过 options.headers 和 options.dataKeys 自定义。
   

2. 大数据量导出：

    如果数据量较大，建议分批次导出或添加加载提示。
   

3. 样式优化：

    可以通过 worksheet['!cols'] 调整列宽，或使用 XLSX.utils.sheet_add_json 添加样式。