当前位置：首页 > VUE

vue实现导出excel模板

2026-02-21 06:44:46VUE

使用xlsx和file-saver库导出Excel模板

安装必要的依赖库：

npm install xlsx file-saver --save

创建导出工具函数：

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

export function exportExcelTemplate(headers, data, fileName = 'template.xlsx') {
  const workbook = XLSX.utils.book_new()
  const worksheet = XLSX.utils.json_to_sheet([])

  // 设置表头
  XLSX.utils.sheet_add_aoa(worksheet, [headers], { origin: 'A1' })

  // 添加数据
  if (data && data.length) {
    XLSX.utils.sheet_add_json(worksheet, data, { origin: 'A2', skipHeader: true })
  }

  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)
}

在Vue组件中使用导出功能

定义表头和数据：

const headers = ['姓名', '年龄', '部门']
const sampleData = [
  { 姓名: '张三', 年龄: 28, 部门: '技术部' },
  { 姓名: '李四', 年龄: 32, 部门: '市场部' }
]

调用导出方法：

methods: {
  exportTemplate() {
    this.$nextTick(() => {
      exportExcelTemplate(headers, sampleData, '员工信息模板.xlsx')
    })
  }
}

添加样式和格式控制

创建带样式的Excel模板：

function exportStyledTemplate() {
  const workbook = XLSX.utils.book_new()
  const worksheet = XLSX.utils.aoa_to_sheet([
    ['姓名', '年龄', '部门'],
    ['张三', 28, '技术部'],
    ['李四', 32, '市场部']
  ])

  // 设置列宽
  worksheet['!cols'] = [{ wch: 15 }, { wch: 10 }, { wch: 20 }]

  XLSX.utils.book_append_sheet(workbook, worksheet, '员工表')
  XLSX.writeFile(workbook, '带样式的模板.xlsx')
}

处理复杂数据结构

转换嵌套对象为平面结构：

function flattenData(data) {
  return data.map(item => ({
    '姓名': item.name,
    '年龄': item.age,
    '部门': item.department.name,
    '职位': item.position
  }))
}

实现前端动态模板生成

根据用户选择生成不同模板：

function generateDynamicTemplate(fields) {
  const headers = fields.map(f => f.label)
  const data = fields.map(f => ({ [f.label]: f.example || '' }))

  exportExcelTemplate(headers, data, '动态模板.xlsx')
}