博客

导出

说明


前端在项目开发中经常会有需要导出表格的需求，如下图所示。那么导出功能如何实现呢？



上代码，下面就是导出按钮绑定点击事件方法：

<!--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模块不管执行成功与否都要执行的代码

｝