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

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

一个REST服务生成PDF并发送给客户端。 它适用于DEsktop浏览器（至lessFF，Chrome），但我无法看到iOS上的PDF内容（例如ipad），无论我使用什么浏览器（Chrome，Safari ..）

这里是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); } ); 

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

例如我在这里做了我的研究（ AngularJS：在angular度应用程序中显示blob（.pdf） ），但找不到合适的解决scheme。

所以请你知道我应该怎么做才能将生成的PDF文件显示到我的iPad / iPhone最终用户？

非常感谢

Answer 1

上面提出的解决scheme都没有为我工作。

主要问题来自iOS中未正确检索的URL 。 下面的代码做正确的工作：

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

即使是这样，它不适用于Chrome的iOS，既不是Opera的iOS …所以在挖掘互联网后，启发了以下问题：

• Blob的createObjectURL下载不工作在Firefox（但在debugging时工作）
• 如何在Chrome iOS上打开Bloburl
• AngularJS：在angular度应用程序中显示blob（.pdf）

…我终于结束了下面的代码（在除iOS上的FF之外的所有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; } 

Answer 2

只需添加下面的代码作为您的$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); } }); 

Answer 3

首先，运行以下命令将该库添加到您的angularjs项目中：

 bower install angular-pdf 

然后将该库添加到您的index.html

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

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

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

然后按照我给你的github页面上的说明以你想要的方式显示你的PDF。 这里是你需要阅读你的PDF作为一个blob的代码。

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

请享用！ ;）

Answer 4

我基本上使用相同的设置，但我build立我的pdf使用不同，无法与iOStesting，但我希望这有助于一些

 $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