Web导出Excel表格

背景：

1. 后端主导实现

流程：前端调用到导出excel接口 -> 后端返回excel文件流 -> 浏览器会识别并自动下载

场景：大部分场景都有后端来做

2. 前端主导实现

流程：前端获取要导出的数据 -> 常规数据用插件处理成一个excel文件 -> 浏览器下载

场景：少数据量的导出

效果图 ：

使用三方插件做需求

1. 不考虑具体业务 实现一个能跑起来最简单的DEMO 基础环境 + 基础效果
2. 在基础DEMO基础上按照实际的业务数据去做对应的修改

pnpm i xlsx
pnpm i @types/xlsx

import { utils, writeFileXLSX } from 'xlsx'

const exportToExcel = ()=>{
  // 1. 创建一个新的工作簿
  const workbook = utils.book_new()
  // 2. 创建一个工作表 要求一个对象数组格式（可以根据需要创建多个）
  const worksheet = utils.json_to_sheet(
    [
      { name: '张三', age: 18 },
      { name: '李四', age: 28 }
    ]
  )
  // 3. 把工作表添加到工作簿  Data为工作表名称
  utils.book_append_sheet(workbook, worksheet, 'Data')
  // 改写表头
  utils.sheet_add_aoa(worksheet, [['姓名', '年龄']], { origin: 'A1' })
  // 4. 导出方法进行导出
  writeFileXLSX(workbook, '计费规则表.xlsx')
}

<el-button @click="exportToExcel">导出Excel</el-button>