当前位置：首页 > VUE

vue报表导出实现

2026-01-19 00:02:24VUE

使用 vue-json-excel 插件实现导出

安装插件依赖：

npm install vue-json-excel --save

在 main.js 中注册组件：

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

模板中使用示例：

<download-excel
  :data="json_data"
  :fields="json_fields"
  name="导出文件名.xls">
  <button>导出Excel</button>
</download-excel>

数据格式示例：

export default {
  data() {
    return {
      json_fields: {
        '姓名': 'name',
        '年龄': 'age',
        '城市': 'city'
      },
      json_data: [
        {name: '张三', age: 28, city: '北京'},
        {name: '李四', age: 32, city: '上海'}
      ]
    }
  }
}

使用 xlsx 库实现复杂导出

安装 xlsx 库：

npm install xlsx --save

核心导出方法：

import XLSX from 'xlsx'

exportExcel() {
  const worksheet = XLSX.utils.json_to_sheet(this.tableData)
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
  XLSX.writeFile(workbook, '导出数据.xlsx')
}

处理复杂表头：

const headers = [
  { header: '姓名', key: 'name', width: 20 },
  { header: '年龄', key: 'age', width: 10 }
]
const data = this.tableData.map(item => ({
  name: item.username,
  age: item.userAge
}))
const worksheet = XLSX.utils.json_to_sheet(data, { header: headers })

实现前端分页数据全量导出

获取所有数据方法：

async exportAllData() {
  const res = await api.getAllData() // 替换为实际API调用
  const worksheet = XLSX.utils.json_to_sheet(res.data)
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, '全部数据')
  XLSX.writeFile(workbook, '全部数据.xlsx')
}

自定义样式和格式

使用 xlsx-style 库：

npm install xlsx-style --save

设置单元格样式示例：

import XLSX from 'xlsx-style'

const ws = XLSX.utils.json_to_sheet(data)
ws['A1'].s = {
  font: { bold: true, color: { rgb: 'FF0000' } },
  fill: { fgColor: { rgb: 'FFFF00' } }
}

服务端生成导出文件

前端请求示例：

exportExcel() {
  window.location.href = '/api/export/excel?params=' + this.queryParams
}

Node.js 服务端示例：

const excel = require('exceljs')

router.get('/export/excel', async (req, res) => {
  const workbook = new excel.Workbook()
  const worksheet = workbook.addWorksheet('报表')

  // 添加数据
  worksheet.addRows(data)

  res.setHeader(
    'Content-Type',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  )
  res.setHeader(
    'Content-Disposition',
    'attachment; filename=report.xlsx'
  )

  await workbook.xlsx.write(res)
  res.end()
})

大数据量分片导出

前端分片请求实现：

vue报表导出实现

async chunkedExport(total) {
  const chunkSize = 5000
  const chunks = Math.ceil(total / chunkSize)
  let allData = []

  for(let i=0; i<chunks; i++) {
    const res = await api.getData({
      page: i+1,
      size: chunkSize
    })
    allData = allData.concat(res.data)
  }

  this.exportToExcel(allData)
}