javascript - Download large size files with angular file saver - Stack Overflow

admin管理员组

文章数量:1291012

I have implemented angular file saver into my project with purpose to download files and it works fine for small files, but for files larger then 50mb I see next error and downloading stops after 35-50mb.

net::ERR_INCOMPLETE_CHUNKED_ENCODING

I have tried to investigate this question in internet and have found that there is a limit 500mb on downloading because obviously cannot be stored so much information in RAM. Unfortunately I didn't find any other quite explanation how to resolve this issue, then I have asked the back-end guy and I've got the answer that everything is fine on his side.

So where is my problem? and how can I resolve this issue? I appreciate any help

here is part of my code:

services

 function attachment(obj) {
        custom.responseType = "arraybuffer";
        delete  custom.params.limit;
        delete  custom.params.offset;
        delete  custom.params.orderBy;
        delete  custom.params.insertedAt;

        var contentType = obj.mimeType;
        var name =  obj.displayFilename;

        return $http.get(Config.rurl('attachments') + '/' + obj.bucketName + '/' + obj.path + '?displayFilename=' + obj.displayFilename, custom)
            .then(function (response) {
                var data = new Blob([response.data], { type: contentType });
                FileSaver.saveAs(data, name);
                delete custom.responseType
            })
            .catch(function (err) {
                delete custom.responseType;
                alert("It has happened an error. Downloading has been stopped") ;
            });
    }

controller function

$scope.download = function (obj) {
        lovServices.attachment(obj)
    }

I have implemented angular file saver into my project with purpose to download files and it works fine for small files, but for files larger then 50mb I see next error and downloading stops after 35-50mb.

net::ERR_INCOMPLETE_CHUNKED_ENCODING

I have tried to investigate this question in internet and have found that there is a limit 500mb on downloading because obviously cannot be stored so much information in RAM. Unfortunately I didn't find any other quite explanation how to resolve this issue, then I have asked the back-end guy and I've got the answer that everything is fine on his side.

So where is my problem? and how can I resolve this issue? I appreciate any help

here is part of my code:

services

 function attachment(obj) {
        custom.responseType = "arraybuffer";
        delete  custom.params.limit;
        delete  custom.params.offset;
        delete  custom.params.orderBy;
        delete  custom.params.insertedAt;

        var contentType = obj.mimeType;
        var name =  obj.displayFilename;

        return $http.get(Config.rurl('attachments') + '/' + obj.bucketName + '/' + obj.path + '?displayFilename=' + obj.displayFilename, custom)
            .then(function (response) {
                var data = new Blob([response.data], { type: contentType });
                FileSaver.saveAs(data, name);
                delete custom.responseType
            })
            .catch(function (err) {
                delete custom.responseType;
                alert("It has happened an error. Downloading has been stopped") ;
            });
    }

controller function

$scope.download = function (obj) {
        lovServices.attachment(obj)
    }

• javascript
• angularjs
• html
• blob
• filesaver.js

Share Improve this question Follow edited Mar 2, 2017 at 9:55 georgeawg 49k1313 gold badges7777 silver badges9898 bronze badges asked Mar 1, 2017 at 22:37 antonyboomantonyboom 1,18122 gold badges1717 silver badges4747 bronze badges 1

• Did you solve this? i was trying to download an excel and get the same issue with large files. stackoverflow./questions/72636282/… – user2868864 Commented Jun 15, 2022 at 20:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Instead of downloading to memory and converting to blob. Set the responseType to 'blob':

//SET responseType to 'blob'
var config = { responseType: ̶'̶a̶r̶r̶a̶y̶b̶u̶f̶f̶e̶r̶'̶ ̶ 'blob' };

return $http.get(url, config)
    .then(function (response) {
        ̶v̶a̶r̶ ̶d̶a̶t̶a̶ ̶=̶ ̶n̶e̶w̶ ̶B̶l̶o̶b̶(̶[̶r̶e̶s̶p̶o̶n̶s̶e̶.̶d̶a̶t̶a̶]̶,̶ ̶{̶ ̶t̶y̶p̶e̶:̶ ̶c̶o̶n̶t̶e̶n̶t̶T̶y̶p̶e̶ ̶}̶)̶;̶
        //USE blob response 
        var data = response.data;
        FileSaver.saveAs(data, name);
    })
    .catch(function (err) {
        alert("It has happened an error. Downloading has been stopped") ;
        throw err;
    });

This avoids the memory overhead of converting the stream to arraybuffer and then making a blob again.

For more information, see MDN XHR API ResponseType.

本文标签： javascriptDownload large size files with angular file saverStack Overflow