在客户端使用angular从nodejs下载文件

时间:2014-07-09 11:49:57

标签: node.js angularjs download route-provider

我有一个简单的角度应用程序,其配置类似于 -

angular.module('app',['ngResource','ngRoute','ui.bootstrap','angularFileUpload']);

angular.module('app').config(function($routeProvider,$locationProvider){
    $locationProvider.html5Mode(true);        
    $routeProvider
        .when('/', { templateUrl: '/partials/main/main', controller: 'mainCtrl'})
        .when('/browse/notes', { templateUrl: '/partials/notes/browseNotes',
            controller: 'browseNotesCtrl'
        })
        .when('/upload/notes', { templateUrl: '/partials/notes/uploadNotes',
            controller: 'uploadNotesCtrl'
        })
        .when('/profile',{ templateUrl:'/partials/account/mvProfile',
            controller: 'mvProfileCtrl' 
        }).when('/browse/notes/:noteId',{ templateUrl:'/partials/notes/noteDetail',
            controller: 'mvNoteDetailsCtrl' 
        });
});

现在,我的noteDetail partial有内容 -

ol
    li(ng-repeat="n in range(note.actualFileName.length)")
    a(ng-click="download(n)") {{note.actualFileName[n]}}

和控制器有代码 -

$scope.download = function(n){
        console.log(n);
        var downloadUrl = '/download/note/' + $scope.note.noteId + '/' + $scope.note.storedFileName[n];
        $http({method:'GET',url:downloadUrl}).success(function(data,status,headers,config){
            console.log(status);
            console.log(data);
        });
    }

我在nodejs中的服务器端路由配置如下 -

app.get('/download/note/:noteid/:fileid',notes.download);

和notes.download已

exports.download = function(req,res) {
    console.log("here");
    console.log(req.params.noteid);
    console.log(req.params.fileid);
    res.status(200);
    var filepath = path.normalize(__dirname + '/../../');
    filepath += 'server/uploads/' + req.params.fileid;
    console.log(filepath);
    res.download(filepath,'server.pdf');
};

现在问题在于我是否打开了一些网址 -

http://localhost:5000/download/note/9281a9d1-1b51-4e1b-9102-2b422cb2a111/e3ec261b-4722-4a69-ada6-68f88e2ff3db.pdf

直接在浏览器中下载新文件 但如果我从$ http打开它,显然它会将加密的二进制数据记录到控制台中,而不是下载它。那么,我该如何实现这一目标呢?

而且,即使我创建了一个像 -

这样的锚标签

beforeClick

然后在我点击之后打开一个没有任何模板的页面(因为我没有在我的routeProvider配置中为此路由定义任何模板,表明路由通过routeProvider而不将其转发到服务器,我觉得 ) 这是我点击附件后看到的 - enter image description here 但如果我在新标签中打开它请求转到服务器并且它可以正常工作

1 个答案:

答案 0 :(得分:2)

您无法使用ajax保存文件,除非您愿意使用blob在客户端重建文件。 See here.

只需使用

之类的东西
$location.url('/download/note/' + $scope.note.noteId + '/' + $scope.note.storedFileName[n]);

至于第二部分,当路径无效时,您的routeProvider不知道该怎么做。添加

$routeProvider
    .when('/', {
        templateUrl: '/partials/main/main',
        controller: 'mainCtrl'
    })
    .when('/browse/notes', {
        templateUrl: '/partials/notes/browseNotes',
        controller: 'browseNotesCtrl'
    })
    .when('/upload/notes', {
        templateUrl: '/partials/notes/uploadNotes',
        controller: 'uploadNotesCtrl'
    })
    .when('/profile', {
        templateUrl: '/partials/account/mvProfile',
        controller: 'mvProfileCtrl'
    })
    .when('/browse/notes/:noteId', {
        templateUrl: '/partials/notes/noteDetail',
        controller: 'mvNoteDetailsCtrl'
    })
    .otherwise({
        redirectTo: '/wherever'
    });