当前位置：首页 > VUE

vue实现网页导出excel

2026-02-22 12:00:39VUE

使用 xlsx 库实现导出

安装 xlsx 库：

npm install xlsx

在 Vue 组件中引入：

import * as XLSX from 'xlsx'

导出方法示例：

exportToExcel() {
  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')
  XLSX.writeFile(wb, '导出数据.xlsx')
}

使用 vue-json-excel 插件

安装插件：

npm install vue-json-excel

全局注册组件：

vue实现网页导出excel

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

模板中使用：

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

数据格式示例：

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

处理大数据量导出

使用 Web Worker 防止界面卡顿：

vue实现网页导出excel

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

self.onmessage = function(e) {
  const { data, fileName } = e.data
  const ws = XLSX.utils.json_to_sheet(data)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
  XLSX.writeFile(wb, fileName)
  self.postMessage('done')
}

主线程调用：

const worker = new Worker('./worker.js')
worker.postMessage({
  data: largeDataArray,
  fileName: '大数据导出.xlsx'
})

自定义样式和格式

设置单元格样式：

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

设置列宽：

ws['!cols'] = [
  { wch: 20 }, // 第一列宽度
  { wch: 10 }, // 第二列宽度
  { wch: 15 }  // 第三列宽度
]

导出多个工作表

创建多个工作表：

const wb = XLSX.utils.book_new()
const ws1 = XLSX.utils.json_to_sheet(data1)
const ws2 = XLSX.utils.json_to_sheet(data2)

XLSX.utils.book_append_sheet(wb, ws1, 'Sheet1')
XLSX.utils.book_append_sheet(wb, ws2, 'Sheet2')
XLSX.writeFile(wb, '多工作表.xlsx')