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

【问题标题】：How to display PDF (Blob) on iOS sent from my angularjs app如何在 iOS 上显示从我的 angularjs 应用程序发送的 PDF（Blob）
【发布时间】：2016-09-07 16:26:12
【问题描述】：

我的 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），但找不到合适的解决方案。

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

非常感谢

【问题讨论】：

嗨！你应该访问那个相关的帖子；）stackoverflow.com/questions/21628378/…
@fabien7474 答案是否解决了您的问题？

标签： javascript ios angularjs spring pdf

【解决方案1】：

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

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

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

即使这样，它也不能在 Chrome iOS 上运行，Opera 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;
}

【讨论】：

你能解释一下我们如何在 Angular 中使用它吗？

【解决方案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);
      }
   });

【讨论】：

此解决方案不适用于 iPad。仍然是同样的问题：没有显示任何内容
您能详细说明您在使用此解决方案时遇到的问题吗？这样我们就可以跟踪到底发生了什么，因为它是经过测试的代码。
非常简单：在 iPad 上什么都没有发生，而在 Chrome 中则显示 Pdf。

【解决方案3】：

我基本上使用与您相同的设置，但我使用不同的方式构建我的 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

【讨论】：