使用 AngularJS 和 Angular-FileSaver.js 通过 http 下载 Blob

Question

我很难解决这个问题。我尝试了很多不同的解决方案，以至于我不确定现在需要修复哪里。我正在尝试通过 http get 检索 Blob 并使用 FileSaver.js 为用户下载文件出于某种原因，每次我尝试打开图像时，都会收到 "damaged, corrupted, or is too large" 消息。我尝试使用 'responseType'（更改为 'blob'），将 'Accept' 添加到 header。似乎没有什么对我有用！！

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

服务

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

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

responseType 配置属性不应该在 headers 对象中
您正在将 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')
})

使用 AngularJS 和 Angular-FileSaver.js 通过 http 下载 Blob

Downloading Blob via http using AngularJS and Angular-FileSaver.js

angularjs

filesaver.js