如何在从我的 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 并将其发送给客户端.它在桌面浏览器(至少是 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: Display blob(.pdf) 在 angular 应用程序中) 但找不到合适的解决方案.

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.

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

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 中不起作用(但在调试时有效)
• 如何在 iOS 版 Chrome 上打开 Blob 网址
• 在 Angular 应用中显示 blob (.pdf)

...我最终得到了以下代码(适用于除 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屋！