Question

我需要从angular下载一个大文件。我有一个链接，当客户端点击时，必须下载该文件。控制器中的代码：

$scope.download = function(id, type){
    LogService.getLogFile(id, type)  //service call endpoint of backend
                    .then(function (data) {  

                        var file = new Blob([data], {type: 'application/csv;charset=utf-8'});
                        var fileURL = $window.URL.createObjectURL(file);
                        a.href = fileURL;
                        a.download = fileName;
                        a.click();
                    })
                    .catch(function (err) {
                        //error
                    });
}

适用于小文件（300Mb），但大文件（800Mb）不起作用。我需要下载文件，直到4Gb。并使用主浏览器（Chrome，Mozilla和Safari）。因为我在jimmywarting/StreamSaver.js 中看到了一个解决方案（未经测试），但仅适用于Chrome和Opera。

我在后端使用Node Js，代码是：

function getFile(req, res){

     res.setHeader('Content-Type', 'application/octet-stream');
     res.setHeader('Content-disposition', 'attachment');

     var filePath = '....'; //PATH 
     var readStream = fs.createReadStream(filePath);

     readStream.pipe(res);

    })
    .catch(function () {
        res.sendStatus(400);
    })

感谢。

Answer 1

最后我决定将令牌添加到url并请求api。

HTML：

<a ng-click="downloadFile('attributes')" ng-if="log.path_attributes_file">download</a>

控制器，添加到网址参数'令牌'。

//Download File
        $scope.downloadFile = function downloadFile(type) {
            window.location.href = '/api/logs/' + $scope.log._id +'/' + type + '?token=' + $http.defaults.headers.common['Authorization'];
        }

Node Js中的app.js，用于从url获取令牌。默认情况下，只从标题中获取。我使用'express-jwt'模块。令牌是：'Bearer 23f334f ... token ... dafafad'

    app.use('/api', expressJwt({ secret: config.secret ,getToken: function fromHeaderOrQuerystring (req) {
    if (req.headers.authorization && req.headers.authorization.split(' ')[0] === 'Bearer') {
        return req.headers.authorization.split(' ')[1];
    } else if (req.query && req.query.token.split(' ')[0] === 'Bearer') {
        return req.query.token.split(' ')[1];
    }
    return null;
}}).unless({ path: ['/api/users/authenticate', '/api/users/register'] }));

Node JS中的处理程序请求。 'nameFile'是下载文件的名称，'pathFile'是文件所在的路径。

function getFile(req, res){
    res.setHeader('Content-Type', 'text/csv');
    res.setHeader('Content-disposition', 'attachment');
    res.attachment(nameFile);
    res.sendFile(path.resolve(pathFile));
}

Answer 2

试试这个：

替换

 a.href = fileURL;

到

window.location.href = fileURL;

Answer 3

见下面的链接，它给出了很好的解释。

http://blog.neilni.com/2016/04/23/download-file-in-angular-js/

http://jsfiddle.net/onury/5gWFL/

https://techdev.de/an-angularjs-directive-to-download-pdf-files/

AngularJs，下载大文件

3 个答案: