vue实现下载

37 阅读1分钟

image.png

第一种情况是后端返回的是一个网址

这个比较简单

使用window.open(网址)浏览器就会自动下载

第二种情况是后端返回的是二进制文件

这就比较复杂了

我试过使用promise,下载的文件无法打开是空白的,只好按网上说的使用XMLHttpRequest

整个方法代码如下


  async downLoad(file) {
      let list = [
       
      ];
     
      // 获取token
      const token = sessionStorage.getItem("token");
      var xhr = new XMLHttpRequest();
      var _this = this;
      xhr.open("post", "/api/fileDownload", true); //获取文件流的接口
      xhr.setRequestHeader("X-Access-Token", token);
      xhr.setRequestHeader("Content-type", "application/json");
      
      //传参
      xhr.send(JSON.stringify(list));
      xhr.responseType = "blob"; //不能漏
      xhr.onload = function () {
        if (this.status === 200) {
          var blob = new Blob([this.response]);
          const url = URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = url;
          //设置下载文件名
          link.download = list[0].fileName;
          link.click();
        }
      };
    },

点击之后,会给后端传参数,然后对返回的二进制文件进行处理,模拟点击链接,浏览器下载文件