Question

我有一个表，其中包含从服务器获取的文件列表。我还有一个按钮，可以下载所选文件。所以我创建了一个调用服务的函数，它在新窗口中打开响应（文件），因此用户可以下载它。控制器：

  $scope.download = function() {

if ($scope.cancelPromise) {
  $scope.cancelPromise.resolve();
}
$scope.cancelPromise = $q.defer();
UserFileSrv.downloadFile.download(
  {
    fileId: $scope.selectedFile.id
  },function(data) {
    if (data) {
      toaster.pop('success', 'Success', 'success');
      window.open(data);
    }
  }, function(error) {
    if (error) {
      toaster.pop('error', 'Error', error);
    }
  }
);

};

服务：

angular.module('app').factory('UserFileSrv', ['$resource', function($resource) {
var userFile = {
    downloadFile: $resource('my_url/:fileId/?', {
      fileId: '@fileId'
    }, {
      download: {
        method: 'GET',
        isArray: false
      }
    })
    };
    return userFile;
}]);

浏览器显示“成功”烤面包机，但它会打开一个包含此字符串的窗口：Cannot GET /%5Bobject%20Object%5D

注意：响应的内容类型为：application/json

Answer 1

您似乎尝试将下载的内容传递给window.open函数。 window.open接受url作为第一个参数。您可以在两种情况下解决您的问题：

1）形成资源的URL（例如：'my_url / 12343'）并将其传递给打开的窗口。但请确保您的服务器使用标题 Content-Disposition = attachment; fileName = someFileName 返回您的回复。它将强制浏览器将响应作为附件处理。

2）否则你可以使用Blob。（它不适用于IE 9或更低版本）

https://developer.mozilla.org/en-US/docs/Web/API/Blob

您可以执行以下操作，而不是使用windows.open：

function downloadBlob(fileName, blob){

  //IE case
  if (!!window.navigator.msSaveBlob){
    window.navigator.msSaveBlob(blob, fileName);
    return;
  }

  //create url
  var url = URL.createObjectURL(blob);

  //create invisible acnhor, to specify the file name
  var a = document.createElement('a');
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = fileName;
  a.click();

  setTimeout(function(){
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }, 100);

}

var data = {x: 1, y:2, name: 'abc'};
var blob = new Blob([JSON.stringify(data)], {type : 'octet/stream'});

downloadBlob('myData.json', blob)

显示如何使用ngResource下载blob的完整解决方案是here

使用Angular和Django下载文件

1 个答案: