PDF Blob - Popup-Fenster zeigt keinen Inhalt

Question

Ich habe die letzten Tage an this problem gearbeitet. Ohne Glück beim Versuch, den Stream auf <embed src> anzuzeigen, habe ich gerade versucht, es in einem neuen Fenster anzuzeigen.

Das neue Fenster zeigt PDF Kontrollen nur)

Jede Idee, warum der Inhalt der pdf zeigt nicht?

Code:

$http.post('/fetchBlobURL',{myParams}).success(function (data) { 
    var file = new Blob([data], {type: 'application/pdf'}); 
    var fileURL = URL.createObjectURL(file); 
    window.open(fileURL); 
}); 

Answer 1

Sie müssen die responseType-arraybuffer setzen, wenn Sie eine blob aus Ihrer Antwortdaten erstellen möchten:

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

weitere Informationen: Sending_and_Receiving_Binary_Data

Answer 2

Ich benutze AngularJS v1.3.4

HTML:

<button ng-click="downloadPdf()" class="btn btn-primary">download PDF</button> 

JS Controller:

'use strict'; 
angular.module('xxxxxxxxApp') 
    .controller('MathController', function ($scope, MathServicePDF) { 
     $scope.downloadPdf = function() { 
      var fileName = "test.pdf"; 
      var a = document.createElement("a"); 
      document.body.appendChild(a); 
      MathServicePDF.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(); 
      }); 
     }; 
}); 

JS Dienstleistungen:

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

Java REST Web S ervice - Spring MVC:

@RequestMapping(value = "/downloadPDF", method = RequestMethod.GET, produces = "application/pdf") 
    public ResponseEntity<byte[]> 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<byte[]> response = new ResponseEntity<byte[]>(contents, headers, HttpStatus.OK); 
      return response; 
     } catch (FileNotFoundException e) { 
      System.err.println(e); 
     } catch (IOException e) { 
      System.err.println(e); 
     } 
     return null; 
    } 

Answer 3

Wenn Sie setzen { responseType: 'blob' }, keine Notwendigkeit Blob auf eigene Faust zu erstellen. Sie können einfach urlbasiert mit Antwort-Inhalt erstellen:

$http({ 
    url: "...", 
    method: "POST", 
    responseType: "blob" 
}).then(function(response) { 
    var fileURL = URL.createObjectURL(response.data); 
    window.open(fileURL); 
});