Télécharger Blob via http en utilisant AngularJS et Angular-FileSaver.js

Question

Je vais avoir un vraiment difficile résoudre ce problème. J'ai essayé tellement de solutions différentes que je ne suis pas sûr de ce que je dois réparer maintenant. Je tente de récupérer un Blob via http get et de télécharger le fichier pour un utilisateur utilisant FileSaver.js Pour une raison quelconque, chaque fois que j'essaie d'ouvrir l'image, je reçois un message "endommagé, corrompu ou trop grand". J'ai essayé de jouer avec le 'responseType' (en changeant en 'blob'), en ajoutant un 'Accept' à l'en-tête. Rien ne semble fonctionner pour moi !! Est-ce que quelqu'un peut me pointer dans la bonne direction?

service

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

Contrôleur

$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

Les deux premiers problèmes que je peux voir ... sont

1. La propriété config responseType ne devrait pas être dans le headers objet
2. Vous passez l'objet response au constructeur Blob où vous souhaitez probablement passer response.data.

je partirais avec

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

et votre consommation ...

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