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

Question

내 Angular 1.5 애플리케이션은 REST를 통해 Java/Tomcat/Spring 백엔드 서버에 연결합니다.

하나의 REST 서비스가 PDF를 생성하고이를 클라이언트에 보냅니다. 그것은 (FF, 크롬 이상) 데스크탑 브라우저에서 잘 작동하지만 나는 여기

는 각도입니다 내가 (크롬, 사파리 ..) 사용하고 어떤 브라우저 iOS에서 PDF 내용 (예를 들어 아이 패드)를 볼 수 없습니다 코드 :

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

봄/JAX-RS 코드입니다 : 나는 예 (AngularJS: Display blob (.pdf) in an angular app) 여기 내 연구를했지만 적절한 해결책을 찾을 수 없습니다

@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(); 
} 

.

제발, 생성 된 PDF를 내 iPad/iPhone 최종 사용자에게 표시하려면 어떻게해야합니까?

감사

Answer 1

위에 제안 된 해결책 중 어느 것도 저에게 효과적이지 않았습니다.

주요 문제는 iOS에서 올바르게 검색되지 않은 URL에서 비롯됩니다. 인터넷을 파고 후

도 이와 또한

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

, 그것은 크롬 아이폰 OS, 어느 오페라 iOS에서 작동하지 않았다 ... 그래서 다음과 같은 질문을 영감 : 다음 코드는 올바른 일을

• Blob createObjectURL download not working in Firefox (but works when debugging)
• How to open Blob URL on Chrome iOS
• AngularJS: Display blob (.pdf) in an angular app

...드디어 (iOS에서 FF를 제외한 모든 아이폰 OS 브라우저에서 작업)을 때라도 코드로 끝났다 :

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

Answer 2

먼저, 다음 명령을 실행하여 AngularJS와 프로젝트에 that library를 추가 많은 :

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

즐기십시오! ;)

Answer 3

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

Answer 4

내가 기본적 동일한 설정을 사용하지만 난 내 PDF 다르게 아이폰 OS와 테스트,가없는 사용하여 구축하지만 난이 희망 도와주세요

$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