使用AngularJS下载多个文件并存储在路径中

时间:2016-03-09 10:09:22

标签: javascript angularjs node.js pug gridfs

我是Angular的新手,我有一个场景,我需要同时下载多个文件。我的文件存储在GridFS中。我可以下载文件,但例如pdf是空白的。存储在gridFS中的contentType是" contentType":" binary / octet-stream",我错过了什么?

我的翡翠代码是

 tr(ng-repeat='row in displayedCollection')
                        td {{ row.Name}}
                        td {{ row.email}}
                        td
                            button.btn.btn-info(type='button',ng-click="downloadDocuments(row.documentsSubmitted)" download) Download Documents

我的控制器代码是

   $scope.downloadDocuments = function (row) {
    angular.forEach(row, function (value, key) {
        var fileToDownload = value.id + "," + 'TrainingPartnerAddingTrainingCenter';

        $http.get('/downloadDocuments/' + fileToDownload).success(function (result, status, headers, config) {
            var _contentType = (headers('Content-Type'));
            var _fileName = headers('FileName');
            var blob = new Blob([ result ], { type : _contentType });
            var url = (window.URL || window.webkitURL).createObjectURL(blob);
            var anchor = angular.element('<a/>');
            anchor.attr({
                href : url,
                target : '_blank',
                download : _fileName
            })[0].click();
        });
    });
};

我的node.js代码如下

exports.downloadDocument = function (req, res) {
var paramData = req.params.fileToDownload.split(',');
var role = req.session.user.role;
var conn = mongoose.connection;
var gfs = Grid(conn.db, mongoose.mongo);
routesLogger.logInfo(role, "downloadDocument", "START");
gfs.findOne({_id: paramData[0], root: paramData[1]}, function (err, file) {
    if (err) {
        routesLogger.logError(role, "downloadDocument", err);
        return res.status(400).send(err);
    }
    else if (!file) {
        routesLogger.logError(role, "downloadDocument", "No File Found for download");
        return res.status(404).send('Error on the database looking for the file.');
    }
    else {
        res.set('Content-Type', file.contentType);
        res.set('Content-Disposition', 'attachment; filename="' + file.filename + '"');

        var readstream = gfs.createReadStream({
            _id: paramData[0],
            root: paramData[1]
        });

        readstream.on("error", function (err) {
            routesLogger.logError(role, "downloadDocument", err);
            res.end();
        });
        readstream.pipe(res);
        routesLogger.logInfo(role, "downloadDocument", "END");
    }
});

};

1 个答案:

答案 0 :(得分:0)

所以我所做的错误是没有添加参数{responseType:&#39; arraybuffer&#39; }。我在这个链接中找到了答案

AngularJS: Display blob (.pdf) in an angular app

 $http.get('/downloadDocuments/' + fileToDownload,{ responseType: 'arraybuffer' }).success(function (result, status, headers, config) {
            console.log(headers('Content-Type'));
            var _contentType = (headers('Content-Type'));
            var _fileName = headers('FileName');
            var blob = new Blob([result], {type: _contentType });
            saveAs(blob, _fileName);