Visualizza blob (.pdf) in un’app angular

Ho cercato di visualizzare il file pdf che sto ottenendo come un blob da una risposta $http.post . Il pdf deve essere visualizzato all’interno dell’app usando per esempio.

Mi sono imbattuto in un paio di pali ma in qualche modo il mio esempio non sembra funzionare.

JS:

Secondo questo documento , ho continuato e ho provato …

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

Ora da quanto ho capito, fileURL crea un URL temporaneo che il blog può utilizzare come riferimento.

HTML:

  

Non sono sicuro di come gestirlo in Angular, la situazione ideale sarebbe (1) assegnarlo a un ambito, (2) ‘preparare / ribuild’ il blob in un pdf (3) passarlo all’HTML usando perché voglio visualizzarlo all’interno dell’app.

Ho fatto ricerche per più di un giorno, ma in qualche modo non riesco a capire come funziona in Angular … E supponiamo che le librerie di visualizzatori di pdf non esistano.

Prima di tutto è necessario impostare responseType su arraybuffer . Questo è necessario se vuoi creare un blob dei tuoi dati. Vedi Sending_and_Receiving_Binary_Data . Quindi il tuo codice sarà simile a questo:

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

La parte successiva è che devi usare il servizio $ sce per rendere il tuo URL angular. Questo può essere fatto in questo modo:

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

Non dimenticare di iniettare il servizio $ sce .

Se tutto ciò è fatto, ora puoi incorporare il tuo pdf:

  

Io uso AngularJS v1.3.4

HTML:

  

Controller JS:

 'use strict'; 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(); }); }; }); 

Servizi JS:

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

Servizi Web Java REST – 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")); String 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; } 

i suggerimenti di michael funzionano come per me un fascino 🙂 Se sostituisci $ http.post con $ http.get, ricorda che il metodo .get accetta 2 parametri invece di 3 … questo è dove è sprecato il mio tempo …;)

Controller:

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

vista:

  

Ho affrontato difficoltà usando “window.URL” con Opera Browser in quanto risulterebbe “non definito”. Inoltre, con window.URL, il documento PDF non è mai stato aperto in Internet Explorer e Microsoft Edge (rimarrebbe in attesa per sempre). Ho trovato la seguente soluzione che funziona in IE, Edge, Firefox, Chrome e Opera (non ho testato con 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); } } 

Fammi sapere se ha aiutato! 🙂

L’aggiunta di responseType alla richiesta creata da angular è davvero la soluzione, ma per me non ha funzionato finché non ho impostato responseType su blob , non su arrayBuffer. Il codice è auto esplicativo:

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

Ho faticato per gli ultimi giorni cercando di scaricare pdf e immagini, tutto quello che ero in grado di scaricare erano semplici file di testo.

La maggior parte delle domande ha gli stessi componenti, ma ci è voluto un po ‘per capire l’ordine giusto per farlo funzionare.

Grazie @Nikolay Melnikov, il tuo commento / risposta a questa domanda è stato quello che ha funzionato.

In poche parole, ecco la mia richiesta di backend del servizio AngularJS:

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

Dal mio controller:

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