vue
复制代码
<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()
// 添加工作表，名为sheet1
const 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>