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

Posted 2023-03-14

【中文标题】如何在 iOS 上显示从我的 angularjs 应用程序发送的 PDF（Blob）

【英文标题】：How to display PDF (Blob) on iOS sent from my angularjs app

【发布时间】：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 最终用户吗？

非常感谢

【问题讨论】：

嗨！你应该访问那个相关的帖子；）***.com/questions/21628378/…

@fabien7474 答案是否解决了您的问题？

【参考方案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 浏览器，除了 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