[SPRING] anglejs 앱에서 보낸 iOS에 PDF (Blob)를 표시하는 방법

anglejs 앱에서 보낸 iOS에 PDF (Blob)를 표시하는 방법

내 Angular 1.5 응용 프로그램은 REST를 통해 Java / Tomcat / Spring 백엔드 서버에 연결합니다.

하나의 REST 서비스는 PDF를 생성하고이를 클라이언트로 보낸다. DEsktop 브라우저 (FF, Chrome 이상)에서는 정상적으로 작동하지만 iOS (ipad의 경우 ipad)에서 PDF 콘텐츠를 볼 수 없습니다 (Chrome, Safari ..).

다음은 각도 코드입니다.

$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 : 각형 응용 프로그램에서 blob (.pdf) 표시)에 대한 연구를 수행했지만 적절한 해결책을 찾을 수 없었습니다.

제발, 제 아이 패드 / 아이폰 최종 사용자에게 생성 된 PDF를 표시하려면 어떻게해야합니까?

고마워.

해결법

1. ==============================

   1.위에서 제안 된 해결책 중 어느 것도 나를 위해 일하지 못했습니다.

   위에서 제안 된 해결책 중 어느 것도 나를 위해 일하지 못했습니다.

   주요 문제는 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;
   }
   

2. ==============================

   2.$ http 호출로 아래 코드를 추가하십시오. 다른 브라우저에서도 처리했습니다.

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

3. ==============================

   3.먼저 다음 명령을 실행하여 해당 라이브러리를 angularjs 프로젝트에 추가하십시오.

   먼저 다음 명령을 실행하여 해당 라이브러리를 angularjs 프로젝트에 추가하십시오.

   bower install angular-pdf
   

   그런 다음 index.html에 라이브러리를 추가하십시오.

   <script src="js/vendor/angular-pdf/dist/angular-pdf.js"></script>
   

   그런 다음 지시문을 종속 항목으로 추가합니다.

   var app = angular.module('App', ['pdf']);
   

   그런 다음 내가 제시 한 github 페이지의 지침에 따라 원하는 방식대로 PDF를 표시하십시오. 다음은 PDF를 BLOB로 읽는 데 필요한 코드입니다.

   currentBlob = new Blob([result], {type: 'application/pdf'});
   $scope.pdfUrl = URL.createObjectURL(currentBlob);
   

   즐겨! ;)

4. ==============================

   4.기본적으로 동일한 설정을 사용하지만 iOS를 사용하여 테스트 할 수 없기 때문에 다르게 내 pdf를 작성하지만이 방법이 도움이되기를 바랍니다.

   기본적으로 동일한 설정을 사용하지만 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
   

from https://stackoverflow.com/questions/39375076/how-to-display-pdf-blob-on-ios-sent-from-my-angularjs-app by cc-by-sa and MIT license