导出
说明
前端在项目开发中经常会有需要导出表格的需求,如下图所示。那么导出功能如何实现呢?
上代码,下面就是导出按钮绑定点击事件方法:
<!--indisabled 禁用开关-->
<el-button
class="ann-content-button2"
@click="exportDerived"
:disabled="indisabled"
>导出核销记录</el-button>
async exportDerived() {
try { //里面封转导出事件
this.indisabled = true;
const res = await mySouvenirExport({ //调接口
batchId: Number(this.page.batchId),
});
const blob = new Blob([res]);
// console.log(blob);
const fileName = "核销记录列表.xls";
const elink = document.createElement("a"); // 创建a标签
elink.download = fileName; // 为a标签添加download属性
// a.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); // 释放标签
} catch (err) {
this.$message.error(err); //导出事件执行失败运行的程序(弹出提示错误信息)
} finally {
this.indisabled = false; //导出事件执行不管成功与否都会执行的程序(按钮开关设为false)
}
},
附加知识点:
try {
需要执行的代码片段
}catch (err){
try模块运行失败需要执行的代码
}finally {
try模块不管执行成功与否都要执行的代码
}