快速下载 Blob

Question

我正在使用此代码从我的 web api 下载文件：

function download(name){
    axios.get(api + "?filename="+name, { responseType: 'blob' })
        .then(res => {
            let blob = new Blob([res.data]);
            let a = document.createElement("a");
            document.body.appendChild(a);
            a.href = window.URL.createObjectUrl(blob);
            a.download = name;
            a.click();
            window.URL.revokeObjectUrl(url);
            a.remove();
        }
    );
}

下载小文件时此代码很棒，但下载大文件时（例如 400mb） 代码等待 blob 读取整个内容，然后才在 chrome 下载管理器中“开始下载”，这对客户端来说非常不直观。

有没有办法将 blob“流式传输”到文件系统？而不必等待文件完全到达我的客户的 RAM，然后才在下载管理器中显示下载？

已解决

我只是将浏览器指向下载链接，而不是通过 axios 库下载文件，因为它只是一个 GET 请求。

function download(name){
    let a = document.createElement("a");
    document.body.appendChild(a);
    a.href = api + "?filename="+name;
    a.click();
    a.remove();
}

只需将服务器端的 ContentDisposition 标头设置为附件，并指定文件名，因为下载属性在某种程度上不适用于此方法。

同时指定 ContentLength 将允许浏览器估计下载时间

Answer 1

如果您需要下载POST 请求的响应，或者您的请求需要某种高级身份验证，您可以尝试使用本机fetch 方法，而不是使用axios 库。

fetch(options)
  .then(res => res.blob())
  .then(blob => {
    // use blob
  });

您可以查看完整的response API here。