1.安装xlsx
(1)npm安装xlsx
npm install xlsx
(2)修改xlsx的版本,使用最新版本编译会有问题,我后来修改成了 "xlsx": "^0.17.5"
"xlsx": "^0.17.5"
2.导出Excel代码
(1)Html前端代码
<template>
<el-button type="primary" @click="exportExcelClick">导出Excel</el-button>
</template>
(2)脚本代码
<script>
import XLSX from "xlsx";
import { ElMessage } from "element-plus";
export default ({
setup() {
const exportExcelClick = () => {
//要导出的数据
let queryData = [];
queryData.push({ Name: '小明', Age: 10 })
queryData.push({ Name: '小仪', Age: 20 })
//字段映射
const fieldDic = { Name: '名称', Age: '年龄' }
//根据字段映射,得到要导出的数据
let exportData = [];
queryData.forEach(data => {
let tempData = {};
Object.keys(data).forEach(key => {
let tempKey = fieldDic[key];
tempData[tempKey] = data[key]
})
//得到一个中文key的JSON
exportData.push(tempData);
})
//将exportData导出至Excel
try {
const sheet = XLSX.utils.json_to_sheet(exportData)
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, sheet);
var fileName = "test.xlsx";
XLSX.writeFile(wb, fileName)
}
catch (ex) {
ElMessage.error(ex);
}
}
return {
exportExcelClick
}
}
})
</script>