javascript - 如何在我的 angularjs 应用程序发送的 iOS 上显示 PDF (Blob)

Question

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

一个 REST 服务生成 PDF 并将其发送给客户端。它在桌面浏览器(至少 FF、Chrome)上运行良好，但无论我使用什么浏览器(Chrome、Safari..)，我都无法在 iOS(例如 ipad)上看到 PDF 内容

这是 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: Display blob (.pdf) in an angular app)，但找不到合适的解决方案。

请问，您知道我应该怎么做才能向我的 iPad/iPhone 最终用户显示生成的 PDF 吗？

非常感谢

Answer 1

上面提出的所有解决方案都不适合我。

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

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

即使如此，它也无法在 Chrome iOS 和 Opera iOS 上运行...所以在浏览互联网并受到以下问题的启发后:

• 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 浏览器):

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