web-dev-qa-db-fra.com

Comment lire le flux pdf dans angularjs

Le flux PDF suivant a été envoyé par un serveur: PDF STREAM

Comment ce flux peut-il être lu dans AngularJS? J'ai essayé d'ouvrir ceci en tant que fichier PDF dans une nouvelle fenêtre en utilisant le code suivant:

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

Mais je ne parviens pas à voir le contenu dans la fenêtre ouverte.

javaangularjspdfinputstream
30
User4567

J'ai réalisé cela en changeant mon code de contrôleur

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

Veuillez consulter le code suivant:

Du côté du contrôleur -

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

Côté HTML:

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

Vous pouvez aussi aller avec Angular ng-pdfviewer et consulter votre pdf en utilisant ses fichiers js.

7
Gurupreet

Java: Méthode Get

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();
1
Vinay Adki

Regardez PDF.JS . Il s'agit d'une bibliothèque javascript côté client pouvant récupérer un flux pdf et le restituer côté client. Angular est incapable de lire un fichier pdf, il ne s'agit donc pas d'un problème angulaire.

1
Lee Willis

Le problème de l'utilisation de config.responseType est que le service $ http exécute toujours le responseTransformer par défaut et tente de convertir la réponse en JSON. En outre, vous envoyez les en-têtes d'acceptation par défaut. Voici une alternative (non testée):

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