如何使用JavaScript下载大文件 [英] How to download large file with JavaScript

问题描述

我需要使用 XMLHttpRequest 或获取，而无需先将文件保存在RAM内存中.

I need to download a large file with JavaScript using XMLHttpRequest or fetch without saving the file first in the RAM-Memory.

正常链接下载对我不起作用，因为我需要在请求的标头中发送承载令牌.

Normal link download doesn't work for me, because I need to send a Bearer Token in the header of the request.

我可以设法下载一个文件，但是这个解决方案"是先将文件保存在RAM内存中，然后再出现一个保存对话框，以便浏览器在文件大于可用RAM时会刹车.-内存.

I could manage to download a file, but this "solution", it's saving the file first in the RAM-Memory, before I get a save dialog, so that the Browser will brake if the file is larger then the available RAM-Memory.

这是我的解决方案":

        var myHeaders = new Headers();
        myHeaders.append('Authorization', `Bearer ${token}`);

        var myInit = { method: 'GET',
            headers: myHeaders,
            mode: 'cors',
            cache: 'default' };
        var a = document.createElement('a');

        fetch(url,myInit)
            .then((response)=> {
                return response.blob();
            })
            .then((myBlob)=> {
                a.href = window.URL.createObjectURL(myBlob);
                var attr = document.createAttribute("download");
                a.setAttributeNode(attr);
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                a.remove();
            });

这是XMLHttpRequest的解决方案":

And here is my "solution" with XMLHttpRequest:

        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = ()=>{
            if (xhttp.readyState == 4){
                if ((xhttp.status == 200) || (xhttp.status == 0)){
                    var a = document.createElement('a');
                    a.href = window.URL.createObjectURL(xhttp.response); // xhr.response is a blob
                    var attr = document.createAttribute("download");
                    a.setAttributeNode(attr);
                    a.style.display = 'none';
                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                }
            }
        };
        xhttp.open("GET", url);
        xhttp.responseType = "blob";
        xhttp.setRequestHeader('Authorization', `Bearer ${token}`);
        xhttp.send();

问题是我该如何下载比可用RAM-Memory大的文件，并同时设置标题?

The question is how can I download files larger then the available RAM-Memory and in the same time setting the headers?

推荐答案

如StreamSaver.js(下面的链接)所示，您可以使用流来解决此问题.

As found in StreamSaver.js (link below), you could work with streams to workaround this issue.

您可以尝试 StreamSaver.js (免责声明:我不是该存储库的所有者).似乎在不兼容跨浏览器的程度上解决了您想要的问题.目前只有Chrome +52和Opera +39支持.

You can try StreamSaver.js (Disclaimer: I am not the owner of that repo). Seems to solve what you want to the extent that it is not cross-browser compatible. Currently it is only supported by Chrome +52 and Opera +39.

或者，还有 FileSaver.js (免责声明:我不是该所有者回购)，但您会遇到当前遇到的相同问题.

Alternatively, there is FileSaver.js (Disclaimer: I am not the owner of that repo) but you'd run into the same problems you are currently running into.

这篇关于如何使用JavaScript下载大文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！