导出
说明
前端在项目开发中经常会有需要导出表格的需求，如下图所示。那么导出功能如何实现呢？
上代码，下面就是导出按钮绑定点击事件方法：
<!--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模块不管执行成功与否都要执行的代码
｝
