使用 AngularJS 和 Angular-FileSaver.js 通过 http 下载 Blob [重复]

Question

解决这个问题我真的很难。我已经尝试了很多不同的解决方案，以至于我不确定现在需要修复哪里。我正在尝试通过 http get 检索 Blob 并使用 FileSaver.js 为用户下载文件 出于某种原因，每次我尝试打开图像时都会收到“损坏、损坏或太大”的消息。我尝试使用“responseType”（更改为“blob”），在标题中添加一个“Accept”。似乎没有什么对我有用！

有人能指出我正确的方向吗？

服务

download: function(blobId, token) {
  var req = {
    method: 'GET',
    cache: false,
    url: 'api/Blob/DownloadBlob/' + blobId,
    headers: {
     'responseType': 'arraybuffer',
     'Authorization': token
    }
  };

  return $http(req)
    .then(function (response) {
      return response;
    }, function(response) {
      // something went wrong
      return $q.reject(response.data);
  });
}

控制器

$scope.downloadFile = function () {
  Data.download($scope.blobId, $scope.token).then(function (response) {
    var blob = new Blob([response], { type: 'image/png' });
    FileSaver.saveAs(blob, 'download.png');
  });
};

Answer 1

我能看到的前两个问题是...

1. responseType 配置属性不应在 headers 对象中
2. 您将response 对象传递给Blob 构造函数，您可能希望在其中传递response.data。

我会去的

return $http.get('api/Blob/DownloadBlob/' + blobId, {
  responseType: 'blob',
  headers: {
   Authorization: token
  },
  transformResponse: function(data) {
    return data // there's no need to attempt any transformations
  }
}).then(function(response) {
  return response.data // your provider consumers only need the blob data
})

在你的消费者中......

Data.download($scope.blobId, $scope.token).then(function(blob) {
  FileSaver.saveAs(blob, 'download.png')
})