当前位置：首页 > VUE

vue表格实现导出

2026-01-16 02:14:59VUE

使用 vue-json-excel 插件

安装插件：

npm install vue-json-excel --save

在组件中引入并注册：

import JsonExcel from 'vue-json-excel'
export default {
  components: {
    JsonExcel
  }
}

模板中使用：

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

配置数据：

data() {
  return {
    tableData: [...], // 表格数据
    exportFields: {
      '列名1': 'field1',
      '列名2': 'field2'
    }
  }
}

使用 xlsx 和 file-saver 库

安装依赖：

npm install xlsx file-saver --save

创建导出方法：

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

methods: {
  exportExcel() {
    const worksheet = XLSX.utils.json_to_sheet(this.tableData)
    const workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
    const data = new Blob([excelBuffer], { type: 'application/octet-stream' })
    FileSaver.saveAs(data, '导出文件.xlsx')
  }
}

使用 Element UI 的表格导出

如果使用 Element UI 表格，可以结合上述方法：

methods: {
  exportExcel() {
    import('@/vendor/Export2Excel').then(excel => {
      const tHeader = ['列名1', '列名2']
      const filterVal = ['field1', 'field2']
      const data = this.formatJson(filterVal, this.tableData)
      excel.export_json_to_excel({
        header: tHeader,
        data,
        filename: '导出文件'
      })
    })
  },
  formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
  }
}

自定义 CSV 导出

简单实现 CSV 导出：

methods: {
  exportCSV() {
    let csvContent = "data:text/csv;charset=utf-8,"
    const headers = Object.keys(this.tableData[0]).join(",")
    const rows = this.tableData.map(item => 
      Object.values(item).join(",")
    )
    csvContent += headers + "\r\n" + rows.join("\r\n")
    const encodedUri = encodeURI(csvContent)
    const link = document.createElement("a")
    link.setAttribute("href", encodedUri)
    link.setAttribute("download", "导出数据.csv")
    document.body.appendChild(link)
    link.click()
  }
}

处理大数据量导出

对于大量数据，建议分页处理或使用 Web Worker：

exportLargeData() {
  const worker = new Worker('./exportWorker.js')
  worker.postMessage(this.tableData)
  worker.onmessage = (e) => {
    const blob = new Blob([e.data], { type: 'application/octet-stream' })
    FileSaver.saveAs(blob, '大数据导出.xlsx')
    worker.terminate()
  }
}

exportWorker.js 内容：

vue表格实现导出

self.importScripts('https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js')

self.onmessage = function(e) {
  const worksheet = XLSX.utils.json_to_sheet(e.data)
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
  self.postMessage(excelBuffer)
}