vue实现文件直接下载

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

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);
  }



作者:Ringo_
链接:https://www.jianshu.com/p/c3e7688afffd
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


有话要说