Vue3借助xlsx库导出Excel文件

前端去导出Excel文件已经很少见了
但是基本使用, 还是需要大致了解下
安装xlsx库
npm install xlsx file-saver –save
安装完成之后, 我们在指定组件进行引入
import * as XLSX from ‘xlsx’
通过按钮点击, 我们需要将数据组装成以下格式
[
[‘title1’, ‘title2’, ‘title3’],
[‘value1’, ‘value2’, ‘value3’],
[‘value1’, ‘value2’, ‘value3’]
]
现在, 我们对接口数据进行组装
const res = await fetchGet(‘/api’)
const headerList = [‘店铺’, ‘产品’, ‘ID编码’]
const valueList = res.data.map((v) => [{
shopName: v.name,
productName: v.productName,
id: v.id
}])
const xlsxList = [headerList, …valueList]
拿到整体数据之后, 我们先来创建工作簿
const workbook = XLSX.utils.book_new()
创建工作表
const worksheet = XLSX.utils.aoa_to_sheet(xlsxList)
将工作表添加到工作簿中
XLSX.utils.book_append_sheet(workbook, worksheet, ‘Sheet1’)
最后, 我们将其导出即可
XLSX.writeFile(workbook, ‘店铺产品信息表.xlsx’)
我们看一下导出样子

这样, 我们功能就实现了
我们下期见