Vue + antd组件组件 实现后端返回二进制流导出实现后端返回二进制流导出Excel模版与上传模版与上传
Excel模版给后端模版给后端
下载模版
上传更新
methods: {
beforeUpload(file) {
let Res = this.checkedList.map((itemm, indexx) => {
this.newJointObj.forEach((item, index) => {
if (item[Object.keys(item)] === itemm) {
this.returnJoint.push(item);
this.returnJoint = [...new Set(this.returnJoint)];
this.totalResult = Object.assign(...this.returnJoint);
}
});
return Res;
});
this.totalResult = this.returnJoint;
this.totalResult = this.totalResult[0];
this.uploadData = {
type: '1',
tableName: this.modalCode,
tableFiled: JSON.stringify(this.totalResult)
};
},
}
downloadFile(e) {
this.beforeUpload();
this.$message.loading('模版下载中...', 1);
axios({
method: 'post',
baseURL: 'http://121.40.100.142/',
url: '/api/api/education/exportTableField',
data: {
type: '0',
tableName: this.modalCode,
tableFiled: JSON.stringify(this.totalResult)
},
headers: {
'Content-Type': 'application/json'
},
responseType: 'blob'
}).then(res => {
const fileName = this.modalTitle + '.xls';
let blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' });
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
this.visible = false;
this.$message.success('导出成功!', 1);
}).catch(err => {
this.$message.error(err);
});
},
uploadUpdate(info) {
if (info.file.status === 'done') {
if (info.file.response.errcode === 0) {
this.$message.success(`${info.file.name} 文件上传成功.`, 3);
this.visible = false;
} else {
this.$message.error(`${info.file.name} 上传失败.`);
}
}
},
有类似需求的同学,欢迎回复一起讨论。
评论0