如何在我的angularjs应用程序发送的iOS上显示PDF（Blob）

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

我的Angular 1.5应用程序通过REST连接到Java / Tomcat / Spring后端服务器。

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

一个REST服务生成PDF并将其发送到客户端。它在DEsktop浏览器(至少是FF,Chrome)上工作正常但我无法在iOS(例如ipad)上看到PDF内容,无论我使用哪种浏览器(Chrome,Safari ..)

Here is the Angular Code :

这是Angular代码:

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

Spring / Jax-RS代码是:

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

我在这里做了我的研究(例如AngularJS:在角应用程序中显示blob(.pdf))但找不到合适的解决方案。

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

那么,请问您应该怎么做才能将生成的PDF显示给我的iPad / iPhone最终用户?

Thanks a lot

非常感谢

4 个解决方案

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

主要问题来自在iOS中未正确检索的URL。以下代码执行正确的工作:

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 :

即便如此,它也无法在Chrome iOS上运行,也不适用于Opera iOS ...所以在挖掘互联网并启发以下问题之后:

Blob createObjectURL download not working in Firefox (but works when debugging)

Blob createObjectURL下载无法在Firefox中运行(但在调试时有效)

How to open Blob URL on Chrome iOS

如何在Chrome iOS上打开Blob网址

Display blob (.pdf) in an angular app

在角度应用中显示blob(.pdf)

... I finally ended up with the following code (working on all iOS browsers except FF on iOS) :

...我最终得到了以下代码(适用于所有iOS浏览器,除了iOS上的FF):

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

#2

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

只需将以下代码添加为$ http调用。我已经为其他浏览器处理了。

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

#3

First, add that library to your angularjs project by running the following command :

首先,通过运行以下命令将该库添加到angularjs项目:

bower install angular-pdf

Then add the library to your index.html

然后将库添加到index.html

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

Then add the directive as a dependency

然后将该指令添加为依赖项

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

Then follow the instructions on the github page I gave you to display your PDF the way you want. Here is the code you will need to read your PDF as a blob.

然后按照我给你的github页面上的说明以你想要的方式显示你的PDF。以下是将PDF作为blob读取所需的代码。

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

Enjoy! ;)

#4

i use basically your same setup but i build my pdf differently using, unable to test with iOS but i hope this helps some

我基本上使用相同的设置,但我使用不同的方式构建我的PDF,无法测试iOS,但我希望这有助于一些

$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

#1