Как отобразить PDF (Blob) на iOS, отправленный из моего приложения angularjs

Мое приложение Angular 1.5 подключается к бэкэнд-серверу Java/Tomcat/Spring через REST.

Одна служба REST генерирует PDF и отправляет его клиенту. Он отлично работает в браузерах DEsktop (по крайней мере, FF, Chrome), но я не вижу содержимое PDF на iOS (например, ipad), независимо от того, какой браузер я использую (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 для моих конечных пользователей iPad/iPhone?

большое спасибо

Источник

4 ответа

Решение

Ни одно из предложенных выше решений не сработало для меня.

Основная проблема исходит от URL это не было правильно получено в iOS. Следующий код выполняет правильную работу:

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;
}
Источник

Просто добавьте следующий код как ваш $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);
      }
   });
Источник

Сначала добавьте эту библиотеку в ваш проект 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 в виде блоба.

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

Наслаждайтесь!;)

Источник

Я использую в основном те же настройки, но я создаю свой 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
Источник
Другие вопросы по тегам