vue导出数据到excel

安装插件

npm install exceljs file-saver

页面代码

<template>
  <div class="test-form">
    <div @click="exportData" class="export-btn">导出为excel</div>
  </div>
</template>

<script setup>
// 导出文件
import ExcelJS from 'exceljs'
import FileSaver from 'file-saver'
import { ref } from 'vue'
// 模拟表格数据
const tableData = ref([
  { name: '张三', age: 25, city: '北京' },
  { name: '李四', age: 30, city: '上海' },
  { name: '王五', age: 35, city: '广州' },
  { name: '赵六', age: 40, city: '深圳' },
  { name: '王二', age: 45, city: '成都' },
  { name: '赵四', age: 50, city: '重庆' },
  { name: '王三', age: 55, city: '西安' },
  { name: '王五', age: 60, city: '北京' },
  { name: '赵五', age: 65, city: '天津' },
  { name: '王四', age: 70, city: '大连' },
])

function fileExcel(fileData, fileName = '汇总') {
  // 创建工作簿
  const workbook = new ExcelJS.Workbook()
  // 添加工作表，名为sheet1
  const sheet1 = workbook.addWorksheet('sheet1')
  // 导出数据列表
  const data = fileData
  // 获取表头所有键
  const headers = Object.keys(data[0])
  // 将标题写入第一行
  sheet1.addRow(headers)
  // 将数据写入工作表
  data.forEach(row => {
    const values = Object.values(row)
    sheet1.addRow(values)
  })
  // 导出表格文件
  workbook.xlsx
    .writeBuffer()
    .then(buffer => {
      let file = new Blob([buffer], { type: 'application/octet-stream' })
      FileSaver.saveAs(file, fileName + '.xlsx')
    })
    .catch(error => console.log('Error writing excel export', error))
}

// 导出数据
const exportData = () => {
  // 处理键名(表头格式)
  const processedData = tableData.value.map(item => {
    return {
      姓名: item.name,
      年龄: item.age,
      城市: item.city,
    }
  })
  fileExcel(processedData, '导出数据')
}
</script>

<style scoped lang="scss">
.test-form {
    .export-btn {
      display: inline-block;
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
    }
}
</style>