当前位置：首页 > VUE

vue表格实现导出

2026-02-17 03:32:01VUE

使用 vue-json-excel 插件

安装插件：

npm install vue-json-excel --save

在组件中引入并注册：

import JsonExcel from 'vue-json-excel'

export default {
  components: {
    JsonExcel
  },
  data() {
    return {
      json_data: [
        {name: '张三', age: 25},
        {name: '李四', age: 30}
      ],
      json_fields: {
        '姓名': 'name',
        '年龄': 'age'
      },
      filename: '用户数据'
    }
  }
}

模板中使用：

<download-excel
  :data="json_data"
  :fields="json_fields"
  :name="filename">
  <button>导出Excel</button>
</download-excel>

使用 xlsx 库

安装依赖：

npm install xlsx file-saver --save

创建导出方法：

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

export default {
  methods: {
    exportExcel() {
      const data = [
        ['姓名', '年龄'],
        ['张三', 25],
        ['李四', 30]
      ]
      const ws = XLSX.utils.aoa_to_sheet(data)
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
      const wbout = XLSX.write(wb, {bookType: 'xlsx', type: 'array'})
      FileSaver.saveAs(
        new Blob([wbout], {type: 'application/octet-stream'}),
        '用户数据.xlsx'
      )
    }
  }
}

自定义表格导出

处理表格数据：

export default {
  methods: {
    exportTable() {
      const table = this.$refs.table
      const wb = XLSX.utils.table_to_book(table)
      const wbout = XLSX.write(wb, {bookType: 'xlsx', type: 'array'})
      FileSaver.saveAs(
        new Blob([wbout], {type: 'application/octet-stream'}),
        '表格数据.xlsx'
      )
    }
  }
}

处理复杂数据格式

格式化日期数据：

methods: {
  formatData(data) {
    return data.map(item => ({
      ...item,
      createTime: this.$moment(item.createTime).format('YYYY-MM-DD')
    }))
  }
}

合并多级表头：

const ws = XLSX.utils.json_to_sheet(this.formatData(tableData))
ws['!merges'] = [
  {s: {r:0,c:0}, e: {r:0,c:3}}
]

导出 CSV 格式

使用纯前端方案：

exportCSV() {
  const csvContent = this.tableData
    .map(row => Object.values(row).join(','))
    .join('\n')
  const blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8;'})
  FileSaver.saveAs(blob, 'data.csv')
}

服务端导出方案

前端请求：

exportServerExcel() {
  axios.post('/api/export', {
    params: this.searchParams
  }, {
    responseType: 'blob'
  }).then(res => {
    const blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
    FileSaver.saveAs(blob, 'server_data.xlsx')
  })
}

服务端示例(Node.js)：

const excel = require('exceljs')
router.post('/export', async (req, res) => {
  const workbook = new excel.Workbook()
  const worksheet = workbook.addWorksheet('Sheet1')
  // 添加表头和数据
  res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
  res.setHeader('Content-Disposition', 'attachment; filename=export.xlsx')
  await workbook.xlsx.write(res)
  res.end()
})

vue表格实现导出