安装插件
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()// 添加工作表，名为sheet1const 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>
