1、安装:xlsx
cnpm i xlsx
2、封装一个excel.js
import * as XLSX from "xlsx";
//三个参数依次是原始json数据,要输出的文件名,表头对应关系
export function export_excel(excelData, fileName, header) {
const formattedHeader = header.map(item => item.value);
const formattedData = excelData.map(item => {
let obj = {};
header.forEach(headerItem => {
obj[headerItem.value] = item[headerItem.key];
});
return obj;
});
const sheet = XLSX.utils.json_to_sheet(formattedData, { header: formattedHeader });
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, sheet, '表1');
XLSX.writeFile(wb, fileName + ".xlsx");
}
3、在使用页面引用:
import {export_exce } from "@/utils/excel";
4、自定义表头
xlsxHeader:[{
key: 'unit',
value: '部门' // 自定义部门表头名称
}, {
key: 'name',
value: '姓名'
}, {
key: 'holiday',
value: '节假日'
}, {
key: 'hMoney',
value: '计费'
}, {
key: 'restday',
value: '休息日'
}, {
key: 'rMoney',
value: '计费'
}, {
key: 'duty',
value: '工作日'
}, {
key: 'dMoney',
value: '工作日计费'
}, {
key: 'allMoney',
value: '总计'
}],
5、调用函数
exData() {
export_excel(this.data, "加班统计表", this.xlsxHeader);//其中this.data为json数据,自己可以根据后端返回接口进行处理
},
6、页面引用
<a-button style="float:right;" type="primary" @click="exData();">导出本页数据</a-button>