Element UI表格导出Excel：Table数据导出方案

2026-02-05 04:42:25作者：江焘钦

在企业级应用开发中，数据导出是核心功能之一。当业务系统积累了大量数据后，用户往往需要将表格数据导出为Excel进行离线分析、报表生成或数据备份。Element UI（一款基于Vue.js 2.0的UI组件库）的Table组件提供了强大的数据展示能力，但原生并未集成Excel导出功能。本文将系统讲解如何为Element UI Table组件开发Excel导出功能，从基础实现到高级优化，解决数据量大、格式复杂、性能瓶颈等实际问题。

技术选型与环境准备

核心依赖库对比

实现Excel导出功能需要选择合适的JavaScript库，以下是当前主流方案的对比分析：

库名称	包体积	兼容性	功能完整性	性能(10万行)	社区活跃度
SheetJS(xlsx)	156KB	所有现代浏览器	完整支持Excel格式	约3秒	★★★★★
exceljs	235KB	IE11+	支持复杂样式和图表	约5秒	★★★★☆
file-saver	2KB	所有现代浏览器	仅负责文件下载	瞬时	★★★★☆

选型建议：SheetJS（npm包名xlsx）是目前最成熟的方案，兼具体积小、性能优、兼容性好的特点，适合大多数业务场景。本文将基于SheetJS+file-saver组合实现导出功能。

项目集成步骤

安装依赖：在Element UI项目中执行以下命令安装必要依赖

npm install xlsx file-saver --save
# 或使用yarn
yarn add xlsx file-saver

类型定义：如果使用TypeScript，需要安装类型声明文件

npm install @types/xlsx @types/file-saver --save-dev

基础导入：在需要实现导出功能的组件中导入核心库

import XLSX from 'xlsx'
import FileSaver from 'file-saver'

基础实现：快速导出Table数据

直接DOM导出方案

Element UI Table组件渲染后会生成标准的HTML表格结构，我们可以通过获取表格DOM元素直接导出：

exportExcel() {
  // 获取Table组件的DOM元素
  const table = document.querySelector('.el-table__body-wrapper table')
  
  // 将DOM表格转换为工作簿对象
  const workbook = XLSX.utils.table_to_book(table)
  
  // 生成Excel文件的二进制数据
  const excelBuffer = XLSX.write(workbook, { 
    bookType: 'xlsx', 
    type: 'array' 
  })
  
  // 将二进制数据转换为Blob对象
  const blob = new Blob([excelBuffer], { 
    type: 'application/octet-stream' 
  })
  
  // 保存文件
  FileSaver.saveAs(blob, '表格数据导出.xlsx')
}

优缺点分析：

优点	缺点
实现简单，几行代码即可完成	只能导出当前页数据
保留表格原有样式	不支持复杂表头和合并单元格
无需处理数据源	分页场景下需要手动处理多页数据

数据源导出方案

更灵活的方式是直接处理Table组件的数据源，支持全量数据导出：

exportExcel() {
  // 从Table组件获取完整数据源
  const data = this.$refs.elTable.data
  
  // 处理表头数据（假设columns是Table的列配置）
  const headers = this.columns.map(col => col.label)
  
  // 处理表格数据
  const exportData = data.map(row => {
    return headers.map((_, index) => {
      const prop = this.columns[index].prop
      return row[prop]
    })
  })
  
  // 合并表头和数据
  const wsData = [headers, ...exportData]
  
  // 创建工作表
  const worksheet = XLSX.utils.aoa_to_sheet(wsData)
  
  // 创建工作簿并添加工作表
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
  
  // 导出文件
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
  const blob = new Blob([excelBuffer], { type: 'application/octet-stream' })
  FileSaver.saveAs(blob, '完整数据导出.xlsx')
}

核心代码解析：

通过this.$refs.elTable.data获取Table组件的完整数据源（需要在Table组件上设置ref="elTable"）
从列配置columns中提取表头标签
将数据源转换为数组数组（Array of Arrays）格式
使用XLSX.utils.aoa_to_sheet创建工作表

高级功能实现

复杂表头导出

Element UI Table支持多级表头，需要特殊处理表头结构：

// 递归处理多级表头
function parseHeaders(columns, parentProp = '') {
  const headers = []
  const dataKeys = []
  
  columns.forEach(col => {
    if (col.children && col.children.length > 0) {
      const childResult = parseHeaders(col.children, parentProp + col.prop + '.')
      headers.push(...childResult.headers)
      dataKeys.push(...childResult.dataKeys)
    } else {
      headers.push(col.label)
      dataKeys.push(parentProp + col.prop)
    }
  })
  
  return { headers, dataKeys }
}

// 使用方法
const { headers, dataKeys } = parseHeaders(this.columns)
const exportData = this.tableData.map(row => {
  return dataKeys.map(key => {
    // 使用lodash的get方法获取嵌套属性
    return _.get(row, key)
  })
})

大数据量导出优化

当数据量超过1万行时，前端导出可能导致页面卡顿。可采用分批次处理和Web Worker优化：

// 主进程代码
exportExcel() {
  // 创建Web Worker
  const worker = new Worker('excel-export-worker.js')
  
  // 监听Worker消息
  worker.onmessage = e => {
    if (e.data.progress) {
      // 更新进度条
      this.progress = e.data.progress
    } else if (e.data.blob) {
      // 保存文件
      FileSaver.saveAs(e.data.blob, '大数据量导出.xlsx')
      worker.terminate()
    }
  }
  
  // 向Worker发送数据
  worker.postMessage({
    data: this.largeData,
    columns: this.columns
  })
}

// excel-export-worker.js
import XLSX from 'xlsx'

self.onmessage = e => {
  const { data, columns } = e.data
  const total = data.length
  const batchSize = 1000
  let wsData = []
  
  // 处理表头
  const headers = columns.map(col => col.label)
  wsData.push(headers)
  
  // 分批次处理数据
  for (let i = 0; i < total; i += batchSize) {
    const batch = data.slice(i, i + batchSize)
    const batchData = batch.map(row => 
      columns.map(col => row[col.prop])
    )
    wsData.push(...batchData)
    
    // 发送进度更新
    self.postMessage({
      progress: Math.floor((i / total) * 100)
    })
  }
  
  // 创建工作表和工作簿
  const worksheet = XLSX.utils.aoa_to_sheet(wsData)
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
  
  // 生成Blob并发送回主线程
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
  const blob = new Blob([excelBuffer], { type: 'application/octet-stream' })
  
  self.postMessage({ blob })
}

功能增强与定制

导出样式定制

通过SheetJS的配置项可以定制Excel的单元格样式：

// 创建单元格样式
const headerStyle = {
  font: { bold: true },
  alignment: { horizontal: 'center' },
  fill: { fgColor: { rgb: 'FFFFCC' } }
}

// 创建样式对象
const wscols = [
  { wch: 15 }, // 第一列宽度15
  { wch: 20 }, // 第二列宽度20
  { wch: 15 },
  { wch: 30 }
]

// 应用样式到工作表
worksheet['!cols'] = wscols
// 设置表头样式（A1到D1）
for (let col = 0; col < headers.length; col++) {
  const cell = XLSX.utils.encode_cell({ r: 0, c: col })
  worksheet[cell].s = headerStyle
}

导出内容筛选

支持用户选择需要导出的列：

// 在模板中添加列选择器
<el-checkbox-group v-model="selectedColumns">
  <el-checkbox v-for="col in columns" :label="col.prop" :key="col.prop">
    {{ col.label }}
  </el-checkbox>
</el-checkbox-group>

// 导出方法中使用选中的列
exportExcel() {
  // 只导出选中的列
  const selectedCols = this.columns.filter(col => 
    this.selectedColumns.includes(col.prop)
  )
  
  // 后续处理...
}

导出进度指示

对于大数据量导出，添加进度指示提升用户体验：

<el-progress 
  v-if="showProgress" 
  :percentage="progress" 
  text-inside 
  stroke-width="2" 
  :status="progress === 100 ? 'success' : ''">
</el-progress>

// 在导出方法中更新进度
updateProgress(percent) {
  this.progress = percent
  this.showProgress = percent < 100
}

集成到Element UI项目

组件封装

将导出功能封装为可复用的Vue组件：

<template>
  <el-button 
    type="primary" 
    icon="el-icon-download" 
    @click="handleExport"
    :loading="exportLoading">
    导出Excel
  </el-button>
</template>

<script>
import XLSX from 'xlsx'
import FileSaver from 'file-saver'

export default {
  name: 'ExcelExport',
  props: {
    // 数据源
    data: {
      type: Array,
      required: true
    },
    // 列配置
    columns: {
      type: Array,
      required: true
    },
    // 文件名
    fileName: {
      type: String,
      default: '数据导出.xlsx'
    }
  },
  data() {
    return {
      exportLoading: false,
      progress: 0
    }
  },
  methods: {
    handleExport() {
      this.exportLoading = true
      try {
        // 实现导出逻辑
        // ...
        
        this.$message.success('导出成功')
      } catch (error) {
        this.$message.error('导出失败: ' + error.message)
      } finally {
        this.exportLoading = false
      }
    }
  }
}
</script>

在Table组件中使用

<template>
  <div>
    <excel-export 
      :data="tableData" 
      :columns="columns" 
      fileName="用户数据.xlsx">
    </excel-export>
    
    <el-table 
      ref="elTable" 
      :data="tableData" 
      :columns="columns">
    </el-table>
  </div>
</template>

<script>
import ExcelExport from './ExcelExport.vue'

export default {
  components: {
    ExcelExport
  },
  data() {
    return {
      tableData: [...],
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        { prop: 'email', label: '邮箱' }
      ]
    }
  }
}
</script>

性能优化与最佳实践

数据量控制策略

数据量	推荐方案	优化措施
<1万行	前端直接导出	分批次处理DOM
1-10万行	Web Worker导出	数据分片，进度提示
>10万行	后端导出	生成文件链接，邮件通知

常见问题解决方案

日期格式问题：

// 格式化日期
formatDate(date) {
  if (!date) return ''
  return new Date(date).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

大数字精度丢失：

// 将数字转换为字符串避免精度丢失
if (typeof value === 'number' && value > 1e12) {
  return value.toString()
}

单元格内容过长：

// 设置单元格自动换行
worksheet['!merges'] = [
  { s: { r: 0, c: 0 }, e: { r: 0, c: 3 } } // 合并单元格示例
]

浏览器兼容性处理

// 兼容IE浏览器的Blob处理
if (typeof Blob !== 'function') {
  this.$message.error('您的浏览器不支持文件导出功能，请升级浏览器')
  return
}

// 兼容旧版浏览器的ArrayBuffer处理
if (!ArrayBuffer.isView(excelBuffer)) {
  excelBuffer = new Uint8Array(excelBuffer)
}