当前位置：首页 > VUE

vue项目实现导出excel

2026-02-22 17:35:40VUE

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

安装依赖库：

npm install xlsx file-saver --save

创建导出工具函数：

import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'

export function exportToExcel(data, fileName = 'export.xlsx') {
  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' })
  saveAs(blob, fileName)
}

在组件中使用：

import { exportToExcel } from '@/utils/exportExcel'

const exportData = [
  { name: '张三', age: 25, department: '研发部' },
  { name: '李四', age: 30, department: '市场部' }
]

function handleExport() {
  exportToExcel(exportData, '员工信息.xlsx')
}

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

安装插件：

npm install vue-json-excel --save

全局注册组件：

import Vue from 'vue'
import JsonExcel from 'vue-json-excel'

Vue.component('downloadExcel', JsonExcel)

在模板中使用：

<download-excel
  :data="exportData"
  :fields="jsonFields"
  name="员工信息.xlsx">
  <button>导出Excel</button>
</download-excel>

<script>
export default {
  data() {
    return {
      exportData: [
        { name: '张三', age: 25, department: '研发部' },
        { name: '李四', age: 30, department: '市场部' }
      ],
      jsonFields: {
        '姓名': 'name',
        '年龄': 'age',
        '部门': 'department'
      }
    }
  }
}
</script>

导出带样式的复杂表格

使用xlsx-style库实现样式导出：

npm install xlsx-style --save

创建带样式的导出函数：

import * as XLSX from 'xlsx-style'
import { saveAs } from 'file-saver'

export function exportStyledExcel(data, headers, fileName = 'export.xlsx') {
  const ws = XLSX.utils.json_to_sheet(data, { header: headers })

  // 设置表头样式
  if(ws['!ref']) {
    const range = XLSX.utils.decode_range(ws['!ref'])
    for(let C = range.s.c; C <= range.e.c; ++C) {
      const headerCell = XLSX.utils.encode_cell({ r: range.s.r, c: C })
      ws[headerCell].s = {
        font: { bold: true, color: { rgb: "FFFFFF" } },
        fill: { fgColor: { rgb: "4F81BD" } },
        alignment: { horizontal: "center" }
      }
    }
  }

  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
  const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
  const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
  saveAs(blob, fileName)
}

导出多Sheet的Excel文件

创建多Sheet导出函数：

export function exportMultiSheetExcel(sheets, fileName = 'export.xlsx') {
  const wb = XLSX.utils.book_new()

  sheets.forEach(sheet => {
    const ws = XLSX.utils.json_to_sheet(sheet.data)
    XLSX.utils.book_append_sheet(wb, ws, sheet.name || 'Sheet')
  })

  const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' })
  const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
  saveAs(blob, fileName)
}

使用示例：

vue项目实现导出excel

const sheets = [
  {
    name: '员工信息',
    data: [
      { name: '张三', age: 25 },
      { name: '李四', age: 30 }
    ]
  },
  {
    name: '部门信息',
    data: [
      { department: '研发部', count: 50 },
      { department: '市场部', count: 30 }
    ]
  }
]

exportMultiSheetExcel(sheets, '公司信息.xlsx')