web-dev-qa-db-fra.com

Comment afficher PDF (Blob) sur iOS envoyé depuis mon application angularjs

Mon application Angular 1.5 se connecte à un serveur principal Java/Tomcat/Spring via REST.

Un service REST génère PDF et l'envoie au client. Cela fonctionne très bien sur les navigateurs DEsktop (FF, Chrome au moins) mais Je ne peux pas voir le contenu PDF sur iOS (ipad par exemple) quel que soit le navigateur que j'utilise (Chrome, Safari ..)

Voici le Angular Code:

$http.get("/displayPdf", {responseType: 'arraybuffer', params: {id: 1}}).
 success(function(data) {
   var blob = new Blob([data], {type 'application/pdf'});
   var objectUrl =  window.URL.createObjectURL(blob);
   window.open(objectUrl);
 }
);

Le code Spring/Jax-RS est: 

@GET
@Path("displayPdf")
@Produces("application/pdf")
Response displayPdf(@QueryParam("id") Long id) {
  byte[] bytes = service.generatePdf(); 
  return javax.ws.rs.core.Response.ok().
    entity(bytes).
    header("Content-Type", "pdf").
    header("Content-Disposition", "attachment; filename='test.pdf'").
    build();
}

Par exemple, j’ai fait mes recherches ici ( AngularJS: Display blob (.pdf) dans une application angulaire ), mais j’ai pu trouver une solution appropriée.

Alors, s'il vous plaît, savez-vous que dois-je faire pour afficher le PDF généré à l'utilisateur final de mon iPad/iPhone?

Merci beaucoup

javascriptiosangularjsspringpdf
5
fabien7474

Aucune des solutions proposées ci-dessus n'a fonctionné pour moi.

Le problème principal provient de URL qui n'a pas été récupéré correctement dans iOS. Le code suivant fait le travail correct:

window.URL = window.URL || window.webkitURL;

Aussi, même avec cela, cela ne fonctionnait pas sur Chrome iOS, ni Opera iOS ... donc après avoir fouillé sur Internet et inspiré par les questions suivantes:

... Je me suis finalement retrouvé avec le code suivant (fonctionnant sur tous les navigateurs iOS sauf FF sur iOS): 

if (window.navigator.msSaveOrOpenBlob) { //IE 11+
  window.navigator.msSaveOrOpenBlob(blob, "my.pdf");
} else if (userAgent.match('FxiOS')) { //FF iOS
  alert("Cannot display on FF iOS");
}
} else if (userAgent.match('CriOS')) { //Chrome iOS
  var reader = new FileReader();
  reader.onloadend = function () { $window.open(reader.result);};
  reader.readAsDataURL(blob);
} else if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) { //Safari & Opera iOS
  var url = $window.URL.createObjectURL(blob);
  window.location.href = url;
}
13
fabien7474

Ajoutez simplement le code ci-dessous en tant qu’appel $http.J’ai également pris en charge les autres navigateurs.

    $http.get("/displayPdf", {responseType: 'arraybuffer', params: {id: 1}}).success(function(data) {
    var blob = new Blob([data], {type 'application/pdf'});
    var anchor = document.createElement("a");
    if(navigator.userAgent.indexOf("Chrome") != -1||navigator.userAgent.indexOf("Opera") != -1){
                    $window.open(URL.createObjectURL(file,{oneTimeOnly:true}));
    }else if(navigator.userAgent.indexOf("iPad") != -1){
                    var fileURL = URL.createObjectURL(file);
                    //var anchor = document.createElement("a");
                    anchor.download="myPDF.pdf";
                    anchor.href = fileURL;
                    anchor.click();
    }else if(navigator.userAgent.indexOf("Firefox") != -1 || navigator.userAgent.indexOf("Safari") != -1){
                        var url = window.URL.createObjectURL(file);
                        anchor.href = url;
                        anchor.download = "myPDF.pdf";
                        document.body.appendChild(anchor);
                        anchor.click();
                        setTimeout(function(){
                            document.body.removeChild(anchor);
                            window.URL.revokeObjectURL(url);  
                        }, 1000);
      }
   });
1
ngCoder

j'utilise fondamentalement votre même configuration mais je construis mon pdf différemment en utilisant, incapable de tester avec iOS mais j'espère que cela aide certains 

$http({ url: $scope.url,
            method: "GET",
            headers: { 'Accept': 'application/pdf' },
            responseType: 'arraybuffer' })
        .then(function (response) {
            var file = new Blob([response.data], {type: 'application/pdf'});
            var fileURL = URL.createObjectURL(file);
            $scope.pdfContent = $sce.trustAsResourceUrl(fileURL);
        });//end http
0
Bob Cadmire

Tout d’abord, ajoutez cette bibliothèque à votre projet angularjs en exécutant la commande suivante:

bower install angular-pdf

Ajoutez ensuite la bibliothèque à votre index.html

<script src="js/vendor/angular-pdf/dist/angular-pdf.js"></script>

Ajoutez ensuite la directive en tant que dépendance

var app = angular.module('App', ['pdf']);

Suivez ensuite les instructions de la page github que je vous ai donnée pour afficher votre PDF comme vous le souhaitez. Voici le code dont vous aurez besoin pour lire votre PDF sous forme de blob.

currentBlob = new Blob([result], {type: 'application/pdf'});
$scope.pdfUrl = URL.createObjectURL(currentBlob);

Prendre plaisir! ;)

0
Guillaume Le Mière