在vue2.0 + element UI 中通过el-table 如何实现数据导出Excel.doc

《在Vue2.0 + Element UI中通过el-table如何实现数据导出Excel》

在Vue2.0项目中结合Element UI的el-table组件实现数据导出Excel功能是常见的业务需求。本文将详细介绍从基础实现到高级优化的完整方案，涵盖前端导出、后端生成、样式处理等核心场景。

一、基础实现方案

1.1 纯前端导出方案

使用SheetJS（xlsx库）是最简单的前端导出方式。首先安装依赖：

npm install xlsx file-saver --save

实现代码示例：

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

export default {
  methods: {
    exportExcel() {
      // 获取el-table数据
      const tableData = this.tableData
      // 创建工作簿
      const wb = XLSX.utils.book_new()
      // 转换数据格式
      const ws = XLSX.utils.json_to_sheet(tableData)
      // 添加工作表
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
      // 生成Excel文件
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
      // 保存文件
      const blob = new Blob([wbout], { type: 'application/octet-stream' })
      FileSaver.saveAs(blob, '导出数据.xlsx')
    }
  }
}

1.2 结合el-table的特殊处理

当el-table包含自定义列或复杂表头时，需要特殊处理：

methods: {
  getExportData() {
    // 获取el-table实例
    const table = this.$refs.myTable
    // 处理多级表头
    const headers = this.flattenHeaders(table.columns)
    // 处理数据转换
    const data = table.data.map(item => {
      const row = {}
      headers.forEach(header => {
        // 处理嵌套属性
        const keys = header.property.split('.')
        let value = item
        keys.forEach(key => {
          value = value ? value[key] : ''
        })
        row[header.label] = value
      })
      return row
    })
    return { headers, data }
  },
  flattenHeaders(columns) {
    const result = []
    columns.forEach(column => {
      if (column.children) {
        column.children.forEach(child => {
          result.push({
            label: child.label,
            property: column.property ? `${column.property}.${child.property}` : child.property
          })
        })
      } else {
        result.push({
          label: column.label,
          property: column.property
        })
      }
    })
    return result
  },
  exportComplexTable() {
    const { headers, data } = this.getExportData()
    const ws = XLSX.utils.json_to_sheet(data, { header: headers.map(h => h.label) })
    // 后续导出逻辑...
  }
}

二、后端生成方案

2.1 Node.js后端实现

使用exceljs库在后端生成Excel：

// server.js
const express = require('express')
const ExcelJS = require('exceljs')
const app = express()

app.get('/export', async (req, res) => {
  const workbook = new ExcelJS.Workbook()
  const worksheet = workbook.addWorksheet('Sheet1')
  
  // 添加表头
  worksheet.columns = [
    { header: 'ID', key: 'id', width: 10 },
    { header: '名称', key: 'name', width: 20 }
  ]
  
  // 添加数据（可从数据库获取）
  worksheet.addRows([
    { id: 1, name: '测试数据1' },
    { id: 2, name: '测试数据2' }
  ])
  
  res.setHeader(
    'Content-Type',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  )
  res.setHeader(
    'Content-Disposition',
    'attachment; filename=导出数据.xlsx'
  )
  
  await workbook.xlsx.write(res)
  res.end()
})

app.listen(3000)

2.2 前端调用接口

methods: {
  async exportFromServer() {
    try {
      const response = await this.$http.get('/export', { responseType: 'blob' })
      const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' })
      const link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = '服务器导出.xlsx'
      link.click()
    } catch (error) {
      console.error('导出失败:', error)
    }
  }
}

三、高级功能实现

3.1 样式自定义

使用SheetJS设置单元格样式：

exportExcelWithStyle() {
  const wb = XLSX.utils.book_new()
  const ws = XLSX.utils.json_to_sheet(this.tableData)
  
  // 创建样式工作表
  const wsStyle = XLSX.utils.aoa_to_sheet([
    ['ID', '名称', '日期'], // 表头
    ...this.tableData.map(item => [item.id, item.name, item.date])
  ])
  
  // 设置表头样式
  const headerRange = XLSX.utils.decode_range(wsStyle['!ref'])
  for (let R = headerRange.s.r; R

3.2 大数据量优化

处理大数据量时采用分块导出：

async exportLargeData() {
  const chunkSize = 1000 // 每块1000条
  const total = this.tableData.length
  let current = 0
  
  const workbook = new ExcelJS.Workbook()
  const worksheet = workbook.addWorksheet('大数据')
  
  // 添加表头
  worksheet.addRow(['ID', '名称'])
  
  while (current  {
      worksheet.addRow([item.id, item.name])
    })
    current += chunkSize
    
    // 显示进度
    const progress = Math.round((current / total) * 100)
    this.$message({
      message: `导出进度: ${progress}%`,
      type: 'info'
    })
  }
  
  // 最终导出
  const buffer = await workbook.xlsx.writeBuffer()
  const blob = new Blob([buffer], { type: 'application/vnd.ms-excel' })
  // 保存文件...
}

四、常见问题解决方案

4.1 中文乱码问题

解决方案：

// 前端设置编码
const blob = new Blob([wbout], {
  type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
})

// 后端设置响应头
res.setHeader('Content-Type', 'application/vnd.ms-excel;charset=utf-8')

4.2 合并单元格处理

// 使用SheetJS合并单元格
const ws = XLSX.utils.json_to_sheet(data)
ws['!merges'] = [
  { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } } // 合并A1:C1
]

// 使用exceljs合并
worksheet.mergeCells('A1:C1')

4.3 跨浏览器兼容性

针对不同浏览器提供备用方案：

function saveAs(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    // IE10+
    window.navigator.msSaveOrOpenBlob(blob, filename)
  } else {
    // 其他浏览器
    const link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = filename
    link.click()
    window.URL.revokeObjectURL(link.href)
  }
}

五、完整组件示例

关键词：Vue2.0、Element UI、el-table、Excel导出、SheetJS、exceljs、前端导出、后端导出、大数据量处理、样式自定义

简介：本文详细介绍了在Vue2.0项目中结合Element UI的el-table组件实现Excel数据导出的多种方案，包括纯前端导出、后端生成、样式自定义、大数据量优化等核心场景，提供了完整的代码实现和常见问题解决方案。

《在vue2.0 + element UI 中通过el-table 如何实现数据导出Excel.doc》

将本文以doc文档格式下载到电脑，方便收藏和打印

推荐度：