vue下载模板（导出）

最新推荐文章于 2024-08-20 11:53:53 发布

梁小茹

最新推荐文章于 2024-08-20 11:53:53 发布

阅读量974

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46653486/article/details/122318801

版权

vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

这段代码展示了如何在前端实现点击按钮下载模板的功能。通过创建隐藏的a标签，设置其href为从接口获取的文件内容的URL，并触发点击下载。主要涉及到的技术包括：Blob对象、URL.createObjectURL方法以及事件监听。

摘要由CSDN通过智能技术生成

     <el-button size="mini">
        <svg-icon
          icon-class="Icon-Save"
          style="
            border: 1px dashed #afb0b2;
            width: 14px;
            height: 14px;
            margin-right: 8px;
          "
        ></svg-icon>
        <span @click="downLoad">下载模板</span>
      </el-button>

    // 下载模板
    downLoad() {
      // 调用接口    直接下载
      getPeopleInfo().then((resp) => {
          // console.log(response);
          const link = document.createElement("a");
          const blob = new Blob([resp], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", decodeURI("下载模板.xls"));
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          this.exportLoading = false;
          // 关闭加载状态
        })
        .catch(() => {
          // 关闭加载状态
          // this.tableLoading = false;
      });
    },