Jak czytać pdf strumień w angularjs

Question

mam następujący strumień PDF z serwera:

Jak to strumień być odczytywane angularjs? Próbowałem otworzyć to jako plik PDF w nowym oknie, używając następującego kodu:

.success(function(data) { 
    window.open("data:application/pdf," + escape(data)); 
}); 

Ale nie widzę zawartości w otwartym oknie.

Answer 1

I to osiągnąć poprzez zmianę mój kod kontrolera

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

Answer 2

Spójrz na PDF.JS. Jest to biblioteka javascript po stronie klienta, która może pobrać strumień PDF i renderować go po stronie klienta. Angular nie jest w stanie odczytać pliku PDF, więc nie jest to kwestia kątowa.

Answer 3

Podniesione rzucić okiem na poniższy kod:

Na Controller Side -

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

HTML niepożądane:

<div ng-controller="PDFController" class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-hidden="true"> 
<div class="modal-dialog modal-lg"> 
    <div class="modal-content" onloadstart=""> 
     <object data="{{pdfContent}}" type="application/pdf" style="width:100%; height:1000px" /> 
    </div> 
</div> 

Możesz także skorzystać z Angulara ng-pdfviewer i wyświetlić swój plik pdf, używając jego plików js.

Answer 4

Java: Get Method

BLOB pdfData = getBlob_Data; 
response.setContentType(pdfData.getContentType()); 
response.setHeader(ApplicationLiterals.HEADER_KEY_CONTENT, "attachment;  filename=FileName.pdf"); 
response.getOutputStream().write(pdfData.getBinaryData()); 
response.getOutputStream().flush(); 

Answer 5

Problem z użyciem config.responseType jest, że usługa $ http nadal działa domyślny responseTransformer i próbuje przekształcić odpowiedź JSON. Wysyłasz także domyślne nagłówki akceptacji. Oto alternatywa (nietestowana):

$http.get('/retrievePDFFiles', { 
    headers: { Accept: "application/pdf"}, 
    transformResponse: function(data) { 
     return new Blob([data], {type: 'application/pdf'}); 
    }}).success(function (data) { 
      var fileURL = URL.createObjectURL(data); 
      window.open(fileURL); 
    });