vue实现文件的下载

一 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();
},