美文网首页
在Vue中下载后端返回的二进制流到本地文件

在Vue中下载后端返回的二进制流到本地文件

作者: Ringo_ | 来源:发表于2022-10-20 12:31 被阅读0次

    一些东拼西凑复制粘贴加上部分个人理解的原理

    Blob(Binary Large Object): 二进制大数据对象。

    在JS中, Blob类型的对象表示文件对象的原始数据,可以通过new Blob()方法创建Blob对象,将后端返回的数据存储到Blob对象中。

    Blob用作URL:
    Blob URL只能由浏览器在内部生成。
    URL.createObjectURL()将创建一个对Blob或File对象的特殊引用,稍后可以使用URL.revokeObjectURL()释放该引用。
    Blob URL/Object URL是一种伪协议,允许Blob和File对象用作图像、二进制数据的下载链接等内容的URL源。即将后端返回的二进制数据封装为Blob对象,然后使用URL.createObjectURL()生成本地URL,之后通过虚拟点击进行文件下载。

    代码实现

    在发送请求时,一定要声明响应类型,这样获取到的返回数据才会是文件流,另外不要对请求进行过滤拦截,直接使用axios进行请求,将所有后端信息全部返回:

      /** 点击导出按钮 下载表格 */
      async exportTest(param: any) {
        const res = await axios.post(
          "请求地址",
          param,
          {
            responseType: "blob",
          }
        );
        return res;
      }
    

    在请求完成后,进行数据的下载:

      const res = await exportTest(param);
      if (res) {
        const blob = new Blob([res.data]);
        const link = document.createElement("a");
        link.download = decodeURI(
          res.headers["content-disposition"].replace(/.*filename=/, "")
        ); //后端可以将文件名放在headers中返回
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(link.href);
        document.body.removeChild(link);
      }
    

    相关文章

      网友评论

          本文标题:在Vue中下载后端返回的二进制流到本地文件

          本文链接:https://www.haomeiwen.com/subject/cmxmzrtx.html