Vue-点击获取文件地址并下载文件

普通下载

html：

<div class="downmb">
      <el-button type="primary" @click="downmb">下载模版</el-button>
    </div>

js：

  // 下载模版文件
    downmb: async function() {
      let _self = this;
      let { data: applyRes } = await _self.$http.get("/export");
      console.log("data", applyRes);

      window.location.href = data
      //this.download(applyRes);
      
      // if (applyRes.result === "success") {
      //   _self.$message({
      //     type: "success",
      //     message: "申请成功"
      //   });
      //   // _self.$router.push({ name: "portal" });
      // } else {
      //   _self.$message({
      //     type: "error",
      //     message: "申请失败"
      //   });
      // }
    },
    // 下载文件
    download(data) {
      if (!data) {
        return;
      }
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", "考勤导入模版.xlsx");

      document.body.appendChild(link);
      link.click();
    }

1.通过window.open

window.open('https://1.1.1.1/test.txt')

为此，博主找到html中a标签的一种方法，如下

 <a href="http://1.1.1.1/test.txt" download="test">
              <el-button class = "button" size="medium" @click="saveInfo"  round>保存配信息至本地</el-button>
 </a>

此处最重要的是download属性，加上后会实现下载效果，download的值为文件名，如果删去download将如同上面两种方法只能打开文件内容

在本地新窗口打开预览可下载

api

js

    let { data } = await downloadEntryBook({ params });
        console.log("1", data);
        let url = window.URL.createObjectURL(data);
        window.open(url);