Question

我正在使用此代码从我的网络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

如果您需要下载<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="categories-wrapper"> <img class="img-box"src='https://66.media.tumblr.com/4f3cbb1b66a76a19a9794a162373abc5/tumblr_inline_n258pbAEBc1qhwjx8.png'/> <input class='category-input' type="checkbox" checked id="checkID"> <label for="checkID"></label> </div>请求的响应，或者您的请求需要某种高级身份验证，而不是使用POST库，则可以尝试使用本机{{ 1}}方法。

axios

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

快速的Blob下载

1 个答案: