1、安装插件
npm install js-xlsx file-saver -S
npm install script-loader -S -D //它帮我们挂载了,不需要引入到main.js里面
js下载连接
解压后放在src文件夹下 (导出Table表格报错 TypeError: Cannot read properties of undefined (reading ‘utils‘) 的错误已经解决)
百度网盘链接: https://pan.baidu.com/s/1x7vpxoFF5szoDdV648ISeA 提取码: r3j1 复制这段内容后打开百度网盘手机App,操作更方便哦
Button 按钮 绑定 onSubmit(“校验表单”)
//表单校验
onSubmit(exportForm) {
this.$refs[exportForm].validate((valid) => {
if (valid) {
this.$message.closeAll();
this.$message.info("导出中,请稍后~");
this.onexcel()
} else {
console.log('error submit!!');
return false;
}
});
//
},
resetForm(exportForm) {
this.dialogVisible = false;
this.$refs[exportForm].resetFields();
} ,
onexcel() {
//服务器发起请求 拿到请求结果
getTimeOrganizer({
startTime: this.exportForm.date1,
endTime: this.exportForm.date2,
}).then((res) => {
if (res.code === 200) {
console.log(res);
this.tableData = res.data.resultList;
import("@/vendor/Export2Excel").then(excel => {
const tHeader = ["组织者", "活动名称", "活动开始时间", "活动结束时间",];//要导出后表头是什么,可以跟tableDate中的表头不一致
//定义结构信息
const filterVal = [
"organizer_name",
"activity_name",
"activity_time_start",
"activity_time_end"
];
const data = this.formatJson(filterVal, res.data.resultList)
excel.export_json_to_excel({
header: tHeader,
data,
//Excel文件名
filename: "组织者信息"
});
//关掉弹窗
this.dialogVisible = false;
this.$message({
message: "导出成功~",
type: "success",
});
});
}
});
},
//下载方法中,需要用到的格式化json的方法
formatJson(filterVal, jsonData) {
return jsonData.map(v =>
filterVal.map(j => {
if (j === "organizer_name") {
return v[j];
} else {
return v[j];
}
})
);
},
这样就完成了