Vue axios使用Blob下载二进制流文件

• get 传参

download() {
  let params = {
    pages: this.page,
    size: this.size,
  };
  axios
    .get(this.$url + "/api/download", {
      params: params,
      responseType: "blob", // 1.首先设置responseType对象格式为 blob: // 二进制流
    })
    .then(
      (res) => {
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        }); // 2.获取请求返回的response对象中的blob 设置文件类型，这里以excel为例
        let url = window.URL.createObjectURL(blob); // 3.创建一个临时的url指向blob对象

        // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
        let a = document.createElement("a");
        a.href = url;
        a.download = "下载文件.xlsx";
        a.click();
        // 5.释放这个临时的对象url
        window.URL.revokeObjectURL(url);
      },
      (err) => {
        resolve(err.response);
      }
    )
    .catch((error) => {
      reject(error);
    });
},

• post 传参

download() {
  let params = {
    pages: this.page,
    size: this.size,
  };
  axios
    .post(
      this.$url + "/api/download",
      params,
      {
        responseType: "blob", // 1.首先设置responseType对象格式为 blob:
      }
    )
    .then((res) => {
      console.log(res); //把response打出来，看下图
      let blob = new Blob([res.data], {
        type: "application/vnd.ms-excel",
      });
      // 2.获取请求返回的response对象中的blob 设置文件类型，这里以excel为例
      let url = window.URL.createObjectURL(blob); // 3.创建一个临时的url指向blob对象

      // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
      let a = document.createElement("a");
      a.href = url;
      a.download = "学生报道表.xlsx";
      a.click();
      // 5.释放这个临时的对象url
      window.URL.revokeObjectURL(url);
      this.diaShow = !this.diaShow;
    })
    .catch((error) => {
      this.$message(error.message);
    });
},