使用AngularJS从Node.JS服务器下载文件 [英] Download a file from Node.JS server with AngularJS

问题描述

我想用浏览器从运行NodeJS的服务器上下载文件. 在服务器端，要提供文件，我有:

I would like to download files with my browser from my server running with NodeJS. On the server side, to serve the file i have :

exports.download = function(req, res) {
  var filename = "33.jpg";
  var filePath = path.join(__dirname, '..', '..', 'downloads', filename);
  var stat = fs.statSync(filePath);

  var fileToSend = fs.readFileSync(filePath);

  res.writeHead(200, {
      'Content-Type': 'image/jpeg',
      'Content-Length': stat.size,
      'Content-Disposition': filename
  });
  res.end(fileToSend);
};

存在名为33.jpg的文件，文件大小为744Kb.客户打来的电话很好

The file called 33.jpg exists and is 744Kb sized. The call from the client works great

在AngularJS的客户端上，这是我如何调用后调用来获取文件(当前未使用参数uri):

On the client side with AngularJS here is how i call a post call to get the file (currently the parameter uri is not used) :

$scope.downloadTrack = function(uri) {
  $http.post('/api/files/download', {uri: uri}).then(function(response) {
    var blob = new Blob([response.data], { type: 'image/jpeg' });
    var fileName = response.headers('content-disposition');
    saveAs(blob, fileName);
  }, function(response) {
    console.log('Download error');
    console.log(response);
  });
}

标题没问题(我可以检索文件名)

The headers are ok (i can retrieve the file name)

我的问题是下载了一个文件，但大小为1.5Mb，并且不可读.我尝试了使用流的其他方法，将数据追加到响应，管道等，但均未成功. 另一点(不确定是否重要):在Safari中打开文件并显示一个损坏的图标，在Chrome中保存文件

My issue is that a file is downloaded but with a size of 1.5Mb and is unreadable. I tried different methods with streams, append data to response, pipe, etc. without success. Another point (not sure is important) : within Safari the files is opened with a broken icon displayed, within Chrome the file is saved

PS:如果信息有用，我会与Yeoman创建项目

PS : i created the project with Yeoman if the information is useful

谢谢

[更新] 新版本的服务器功能(仍然无法正常工作)

[Update] New version of server function (still not working)

exports.download = function(req, res) {
  var filename = "33.jpg";
  var filePath = path.join(__dirname, '..', '..', 'downloads', filename);
  var stat = fs.statSync(filePath);
  var fileToSend = fs.readFileSync(filePath);
  res.set('Content-Type', 'image/jpeg');
  res.set('Content-Length', stat.size);
  res.set('Content-Disposition', filename);
  res.send(fileToSend);
};

[更新2] 两倍大小的文件在文件中随机包含额外的"efbffd"字符序列，使其无法读取

[Update 2] The double sized file contains extra "efbffd" char sequence randomly in the file making it unreadable

推荐答案

通过将响应类型的定义设置为blob来解决问题

Problem solved with a definition of the response type set to blob

  $http({
      url: '/api/files/download',
      method: "POST",
      data: {
        uri: uri
      },
      responseType: 'blob'
  }).then(function (response) {
      var data = response.data;
      var headers = response.headers;
      var blob = new Blob([data], { type: 'audio/mpeg' });
      var fileName = headers('content-disposition');
      saveAs(blob, fileName);
  }).catch(function (response) {
    console.log('Unable to download the file')
  });

这篇关于使用AngularJS从Node.JS服务器下载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！