背景:
1. 后端主导实现
流程:前端调用到导出excel接口 -> 后端返回excel文件流 -> 浏览器会识别并自动下载
场景:大部分场景都有后端来做
2. 前端主导实现
流程:前端获取要导出的数据 -> 常规数据用插件处理成一个excel文件 -> 浏览器下载
场景:少数据量的导出
效果图 :
使用三方插件做需求
- 不考虑具体业务 实现一个能跑起来最简单的DEMO [基础环境 + 基础效果]
- 在基础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>