在客户端使用角度从nodejs下载文件 [英] downloading files from nodejs using angular at client side

问题描述

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

I have a simple angular app which has configuration like -

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部分有内容 -

Now, my noteDetail partial has content -

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

，控制器有代码 -

and controller has code -

$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中的服务器端路由配置如下 -

and my server side route configuration in nodejs is as follows -

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

和notes.download有

and notes.download has

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');
};

现在的问题是如果我打开一些网址，如 -

now the problem here is if i open some url like -

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

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

directly in the browser it downloads the new file but if i open it from the $http obviously it logs the encrypted binary data into the console, instead of downloading it. So, how do i achieve this?

，即使我创建了一个锚点标签，如 -

and also, even if i create an anchor tag with something like -

然后点击它打开没有任何模板的页面（如我的routeProvider配置中没有为此路由定义任何模板，表示该路由通过routeProvider，它不将其转发到服务器，我觉得）
这里是我点击附件后看到的 -

但如果我在新的标签请求中打开它到服务器它的工作原理

and then after i click it opens an page without any template ( as i don't have any template defined for this route in my routeProvider configuration, indicating that the route passes through the routeProvider which does not forward it to the server, i feel ) here is what i see after clicking on attachment - but if i open it in new tab request goes to server and it works

推荐答案

除非您愿意在客户端重建文件，否则无法使用ajax保存文件使用斑点。 请参阅此处

You can't save files using ajax, unless you're willing to rebuild the file on the client's side using blobs. See here.

只需使用

$location.url('/download/note/' + $scope.note.noteId + '/' + $scope.note.storedFileName[n]);

对于第二部分，当路径无效时，您的routeProvider不知道该怎么办。添加

As for the second part, your routeProvider doesn't know what to do when the path is invalid. Add

$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'
    });

这篇关于在客户端使用角度从nodejs下载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！