How to display PDF (Blob) on iOS sent from my angularjs app

Question

My Angular 1.5 application connect to a Java/Tomcat/Spring backend server via REST.

One REST service generates PDF and send it to the client. It works fine on DEsktop browsers (FF, Chrome at least) but I cannot see the PDF content on iOS (ipad for instance) whatever the browser I am using (Chrome, Safari..)

Here is the 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);
 }
);

The Spring/Jax-RS code is :

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

I have done my research here for instance(AngularJS: Display blob (.pdf) in an angular app) but could not find an appropriate solution.

So please, do you know what should I do to display the generated PDF to my iPad/iPhone end-users ?

Thanks a lot

Solution 1

None of the solutions proposed above did work for me.

The main issue comes from URL that wasn't retrieved correctly in iOS. The following code do the correct work :

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

Also even with this, it did not work on Chrome iOS, neither Opera iOS...so after digging the internet and inspired with the following questions :

• Blob createObjectURL download not working in Firefox (but works when debugging)
• How to open Blob URL on Chrome iOS
• Display blob (.pdf) in an angular app

... I finally ended up with the following code (working on all iOS browsers except FF on 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;
}

Solution 2

Just add the below code as your $http call.I've handled for other browsers as well.

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

Comments

[glemiere]

Hi! You should visit that related post ;) stackoverflow.com/questions/21628378/…

[ngCoder]

@fabien7474 did the answers resolved your issue ?

[Kapil Gund]

This solution does not work for iPad. Still the same issue : nothing is displyaed

[ngCoder]

can you elaborate what issue you have faced while using this solution ? So that we can track what exactly happened as it is a tested out code.

[Kapil Gund]

Very simple : nothing happens on iPad whereas in Chrome for instance, Pdf is displayed.

[Chetan Oswal]

Can you please explain how can we make use of this in Angular?