web-dev-qa-db-ja.com

私のangularjsアプリから送信されたiOSでPDF（Blob）を表示する方法

私のAngular 1.5アプリケーションはREST経由でJava/Tomcat/Springバックエンドサーバーに接続します。

1つのRESTサービスはPDFを生成し、それをクライアントに送信します。これはDESktopブラウザーで正常に動作します（FF、Chrome at少なくとも）しかし使用しているブラウザ（Chrome、Safari ..）に関係なく、iOS（ipadなど）でPDFコンテンツが表示されません）

これが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コードは次のとおりです。

@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 angular app ）が、適切な解決策を見つけることができませんでした。

生成されたPDFをiPad/iPhoneエンドユーザーに表示するにはどうすればよいですか？

どうもありがとう

javascriptiosangularjsspringpdf
6
fabien7474

上で提案された解決策はどれも私にはうまくいきませんでした。

主な問題は、iOSで正しく取得されなかったURLに起因します。次のコードは正しい動作をします：

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

また、これでも、Chrome iOS、どちらもOpera iOS ...では機能しませんでした。インターネットを掘り下げて、次の質問に触発された後：

...私は最終的に次のコードになりました（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;
}
22
fabien7474

以下のコードを$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);
      }
   });
1
ngCoder

私は基本的に同じセットアップを使用しますが、iOSでテストできないため、PDFのビルド方法が異なりますが、これが役立つことを願っています

$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
0
Robert Cadmire