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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

使用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);
    });
},

接口调用成功后解析

    const blob = new Blob([res.data], {     // 创建一个新的Blob对象来接收后端的文件,这里第一个参数必须是数组类型，否则下载必出错。
        type: 'application/vnd.ms-excel'    // type，表明该 Blob 对象所包含数据的 MIME 类型,这需要前后端统一规划
    })
    let link = document.createElement('a')
    let body = document.querySelector('body')
    link.href = window.URL.createObjectURL(blob) // 
    link.style.display = 'none' // 让这个a标签不可见
    link.download = '文件名称'  //文件名称
    body.appendChild(link)
    link.click()        // 创建了新的a标签之后模拟点击事件，开始传输文件
    body.removeChild(link)  // 下载完成之后，移除按钮，垃圾回收，减少页面内存消耗
    window.URL.revokeObjectURL(link.href)   // 移除之前使用createObjectURL创建的URL，垃圾回收

 IE10+ 下载（未尝试）

//res 是后台返回的结果
              const content = res.data;
              const blob = new Blob([content]);
              const fileName = "下载文件名"; //下载的文件名称
              if ('download' in document.createElement('a')) { // 非IE下载
                const elink = document.createElement('a');
                elink.download = fileName;
                elink.style.display = 'none';
                elink.href = URL.createObjectURL(blob);
                document.body.appendChild(elink);
                elink.click();
                URL.revokeObjectURL(elink.href); // 释放URL 对象
                document.body.removeChild(elink);
              } else { // IE10+下载
                 navigator.msSaveBlob(blob, fileName);
              }

来源：https://www.jianshu.com/p/cda41dd5a3df

https://blog.csdn.net/u013746071/article/details/87864085

以上是 Vue axios使用Blob下载二进制流文件 的全部内容， 来源链接： utcz.com/z/377624.html

回到顶部