如何在我的angularjs应用程序发送的iOS上显示PDF（Blob） [英] How to display PDF (Blob) on iOS sent from my angularjs app

问题描述

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

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

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

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

以下是Angular代码：

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

Spring / Jax-RS代码是：

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

我在这里完成了我的研究（AngularJS：在角度应用中显示blob（.pdf））但找不到合适的解决方案。

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

那么，您知道我该怎么做才能将生成的PDF显示给我的iPad / iPhone最终用户吗？

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

非常感谢

推荐答案

上面提出的解决方案都不适用于我。

None of the solutions proposed above did work for me.

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

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;

即使这样，它也无法在Chrome iOS上运行，也不适用于Opera iOS ...所以之后挖掘互联网并启发以下问题：

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下载无法在Firefox中运行（但在调试时有效）


• 如何在Chrome iOS上打开Blob网址


• 以角度显示blob（.pdf）应用

• 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

...我最终得到了以下代码（适用于除iOS上的FF以外的所有iOS浏览器） ：

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

这篇关于如何在我的angularjs应用程序发送的iOS上显示PDF（Blob）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！