当前位置：首页 > VUE

vue实现导出表格数据

2026-01-22 14:24:43VUE

使用 vue-json-excel 插件导出表格数据

安装 vue-json-excel 插件

npm install vue-json-excel

在 main.js 中引入并注册组件

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

在组件中使用

<download-excel 
  :data="tableData"
  :fields="jsonFields"
  name="导出数据.xls">
  <button>导出Excel</button>
</download-excel>

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ],
      jsonFields: {
        'ID': 'id',
        '姓名': 'name',
        '年龄': 'age'
      }
    }
  }
}

使用 xlsx 和 file-saver 库实现导出

安装所需依赖

npm install xlsx file-saver

实现导出功能

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

export default {
  methods: {
    exportExcel() {
      const data = this.tableData
      const worksheet = XLSX.utils.json_to_sheet(data)
      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/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
      FileSaver.saveAs(blob, '导出数据.xlsx')
    }
  }
}

使用原生 JavaScript 实现 CSV 导出

实现 CSV 导出方法

export default {
  methods: {
    exportToCSV() {
      const data = this.tableData
      const csvContent = "data:text/csv;charset=utf-8," 
        + data.map(row => Object.values(row).join(",")).join("\n")

      const encodedUri = encodeURI(csvContent)
      const link = document.createElement("a")
      link.setAttribute("href", encodedUri)
      link.setAttribute("download", "导出数据.csv")
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}

表格数据格式化处理

处理日期和特殊字符

formatData(data) {
  return data.map(item => {
    return {
      ...item,
      date: this.$moment(item.date).format('YYYY-MM-DD'),
      amount: `¥${item.amount.toFixed(2)}`
    }
  })
}

处理多级嵌套对象

flattenData(data) {
  return data.map(item => {
    return {
      id: item.id,
      name: item.user.name,
      department: item.user.department.name
    }
  })
}

服务器端数据导出实现

通过 API 请求导出

vue实现导出表格数据

exportExcelFromServer() {
  axios({
    url: '/api/export',
    method: 'GET',
    responseType: 'blob'
  }).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', '服务器数据.xlsx')
    document.body.appendChild(link)
    link.click()
  })
}