如下

npm i 依赖

npm i xlsxnpm i xlsx-style-vite

1、简单的使用：.vue文件中使用

const dataSource = ref([]) // 数据源const columns = [{title: '用户名',key: 'userName',width: 120,},{title: '用户组',key: 'userGroup',width: 120,},{title: '状态',key: 'enable',width: 100,},{title: '余额',key: 'balance',width: 120,},{title: 'NB余额',key: 'nbBalance',width: 120,},{title: '创建时间',key: 'createTime',width: 180,},{title: '操作',key: 'action',width: 200,fixed: 'right',},
]-------------------------------------------------------------------------------------------------const transData = (columns: any, tableList: any) => {const obj = columns.reduce((acc: any, cur: any) => {if (!acc.titles && !acc.keys) {acc.titles = []acc.keys = []}acc.titles.push(cur.title)acc.keys.push(cur.key)return acc}, {})console.log('obj=', obj)const tableBody = tableList.map((item: any) => {return obj.keys.map((key: string) => item[key])})console.log('tableBody=', tableBody)return [obj.titles, ...tableBody]
}const exportExcel = () => {const tableData = transData(columns, dataSource.value)console.log('tableData=', tableData)// 将数据数组转换为工作表const ws = XLSX.utils.aoa_to_sheet(tableData)// 创建workbookconst wb = XLSX.utils.book_new()ws['!ref'] = `A1:AI${tableData.length}`// 设置列宽，这里只设置了前6列的列宽ws['!cols'] = [{ wpx: 120 }, { wpx: 100 }, { wpx: 110 }, { wpx: 110 }, { wpx: 110 }, { wpx: 110 }]/*合并单元格：【s：start合并开始、 e：end合并结束、r：row行、c：col列】如：{ s: { r: 0, c: 0 }, e: { r: 0, c: 1 } }，表示：A1 与 B1，合并为A1的内容其实就是：0：代表第一行，或第一列；1：代表第二行，或第二列；*/ws['!merges'] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 0 } }]// 将 工作表 添加到 workbookXLSX.utils.book_append_sheet(wb, ws, 'Sheet1')// 将 workbook 写入文件XLSX.writeFile(wb, 'tablename.xlsx')
}