Affichage blob (.pdf) dans une application angular

Tout d’abord, vous devez définir le responseType sur arraybuffer . Ceci est nécessaire si vous souhaitez créer un blob de vos données. Voir Sending_and_Receiving_Binary_Data . Ainsi, votre code ressemblera à ceci:

 $http.post('/postUrlHere',{myParams}, {responseType:'arraybuffer'}) .success(function (response) { var file = new Blob([response], {type: 'application/pdf'}); var fileURL = URL.createObjectURL(file); }); 

La partie suivante est que vous devez utiliser le service $ sce pour que votre url bénéficie de la confiance angular. Cela peut être fait de cette façon:

 $scope.content = $sce.trustAsResourceUrl(fileURL); 

N’oubliez pas d’injecter le service $ sce .

Si tout est fait, vous pouvez maintenant intégrer votre pdf:

J’utilise AngularJS v1.3.4

HTML:

 download PDF 

Contrôleur JS:

 'use ssortingct'; angular.module('xxxxxxxxApp') .controller('xxxxController', function ($scope, xxxxServicePDF) { $scope.downloadPdf = function () { var fileName = "test.pdf"; var a = document.createElement("a"); document.body.appendChild(a); a.style = "display: none"; xxxxServicePDF.downloadPdf().then(function (result) { var file = new Blob([result.data], {type: 'application/pdf'}); var fileURL = window.URL.createObjectURL(file); a.href = fileURL; a.download = fileName; a.click(); }); }; }); 

Services JS:

 angular.module('xxxxxxxxApp') .factory('xxxxServicePDF', function ($http) { return { downloadPdf: function () { return $http.get('api/downloadPDF', { responseType: 'arraybuffer' }).then(function (response) { return response; }); } }; }); 

Services Web REST Java – Spring MVC:

 @RequestMapping(value = "/downloadPDF", method = RequestMethod.GET, produces = "application/pdf") public ResponseEntity getPDF() { FileInputStream fileStream; try { fileStream = new FileInputStream(new File("C:\\xxxxx\\xxxxxx\\test.pdf")); byte[] contents = IOUtils.toByteArray(fileStream); HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.parseMediaType("application/pdf")); Ssortingng filename = "test.pdf"; headers.setContentDispositionFormData(filename, filename); ResponseEntity response = new ResponseEntity(contents, headers, HttpStatus.OK); return response; } catch (FileNotFoundException e) { System.err.println(e); } catch (IOException e) { System.err.println(e); } return null; } 

Les suggestions de Michael fonctionnent comme un charme pour moi 🙂 Si vous remplacez $ http.post par $ http.get, rappelez-vous que la méthode .get accepte 2 parameters au lieu de 3 … c’est ici que je perds mon temps …;)

manette:

 $http.get('/getdoc/' + $stateParams.id, {responseType:'arraybuffer'}) .success(function (response) { var file = new Blob([(response)], {type: 'application/pdf'}); var fileURL = URL.createObjectURL(file); $scope.content = $sce.trustAsResourceUrl(fileURL); }); 

vue:

J’ai eu des difficultés à utiliser “window.URL” avec le navigateur Opera car cela aurait pour résultat “non défini”. De plus, avec window.URL, le document PDF ne s’ouvrait jamais dans Internet Explorer et Microsoft Edge (il restrait en attente pour toujours). Je suis venu avec la solution suivante qui fonctionne dans IE, Edge, Firefox, Chrome et Opera (n’ont pas testé avec Safari):

 $http.post(postUrl, data, {responseType: 'arraybuffer'}) .success(success).error(failed); function success(data) { openPDF(data.data, "myPDFdoc.pdf"); }; function failed(error) {...}; function openPDF(resData, fileName) { var ieEDGE = navigator.userAgent.match(/Edge/g); var ie = navigator.userAgent.match(/.NET/g); // IE 11+ var oldIE = navigator.userAgent.match(/MSIE/g); var blob = new window.Blob([resData], { type: 'application/pdf' }); if (ie || oldIE || ieEDGE) { window.navigator.msSaveBlob(blob, fileName); } else { var reader = new window.FileReader(); reader.onloadend = function () { window.location.href = reader.result; }; reader.readAsDataURL(blob); } } 

Faites-moi savoir si cela a aidé! 🙂

L’ajout de responseType à la requête faite à partir d’angular est effectivement la solution, mais pour moi, cela n’a pas fonctionné tant que j’ai défini responseType sur blob , pas sur arrayBuffer. Le code est explicite:

  $http({ method : 'GET', url : 'api/paperAttachments/download/' + id, responseType: "blob" }).then(function successCallback(response) { console.log(response); var blob = new Blob([response.data]); FileSaver.saveAs(blob, getFileNameFromHttpResponse(response)); }, function errorCallback(response) { }); 

Au cours des derniers jours, j’ai eu du mal à télécharger des fichiers PDF et des images, tout ce que je pouvais télécharger était de simples fichiers texte.

La plupart des questions ont les mêmes composants, mais il a fallu du temps pour trouver le bon ordre pour que cela fonctionne.

Merci @ Nikolay Melnikov, votre commentaire / réponse à cette question était ce qui a fonctionné.

En bref, voici mon appel de service AngularJS Service:

  getDownloadUrl(fileID){ // //Get the download url of the file let fullPath = this.paths.downloadServerURL + fileId; // // return the file as arraybuffer return this.$http.get(fullPath, { headers: { 'Authorization': 'Bearer ' + this.sessionService.getToken() }, responseType: 'arraybuffer' }); } 

De mon contrôleur:

 downloadFile(){ myService.getDownloadUrl(idOfTheFile).then( (response) => { //Create a new blob object let myBlobObject=new Blob([response.data],{ type:'application/pdf'}); //Ideally the mime type can change based on the file extension //let myBlobObject=new Blob([response.data],{ type: mimeType}); var url = window.URL || window.webkitURL var fileURL = url.createObjectURL(myBlobObject); var downloadLink = angular.element(''); downloadLink.attr('href',fileURL); downloadLink.attr('download',this.myFilesObj[documentId].name); downloadLink.attr('target','_self'); downloadLink[0].click();//call click function url.revokeObjectURL(fileURL);//revoke the object from URL }); }