有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue下载文件流(vue实现文件的下载)

vue 炮渣日记 3周前 (11-18) 13次浏览 已收录 0个评论 扫描二维码

一 template

<Button type="default" @click="onDownloadTemplate">下载</Button>

二 script

 // 下载模板
  onDownloadTemplate() {
      this.$http({
          method: "get",
          url: "该方法对应的后端的 接口地址",
          responseType: "arraybuffer", //此处注意请求头,此处一定要配,否则下载的文件打不开
      }).then((res) => {
          console.log("下载模板res", res);
          this.download(res.data);
      });
  },
   // 将下载接口返回的内容进行处理,可以下载到指定路径
download(data) {
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.id = "Adownload";
        link.setAttribute("download", "excel.xlsx"); //要和后端命名保持一致,此处是导出excel表格
        document.body.appendChild(link);
        link.click();
        document.getElementById("Adownload").remove();
},
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址