vue实现文件直接下载

• 2023-01-16
• 745 View

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

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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。