Показывать блоб (.pdf) в угловом приложении

Я пытался отобразить pdf-файл, который я получил в виде блоба из ответа $http.post. PDF-файл должен отображаться в приложении с использованием, например, <embed src>.

Я наткнулся на пару сообщений в стеке, но мой пример почему-то не работает.

JS:

Согласно этому документу я продолжил и попробовал ...

$http.post('/postUrlHere',{myParams}).success(function (response) {
 var file = new Blob([response], {type: 'application/pdf'});
 var fileURL = URL.createObjectURL(file);
 $scope.content = fileURL;
});

Теперь, насколько я понимаю, fileURL создает временный URL-адрес, который может использоваться блогом в качестве ссылки.

HTML:

<embed src="{{content}}" width="200" height="200"></embed>

Я не уверен, как справиться с этим в Angular, идеальной ситуацией было бы (1) назначить его области, (2) 'подготовить /перестроить 'BLOB-объект в PDF-файл (3) передайте его в HTML-код, используя <embed>, потому что я хочу отобразить его в приложении.

Я занимаюсь исследованиями уже более суток, но почему-то не могу понять, как это работает в Angular ... И давайте просто предположим, что библиотеки для просмотра PDF не были доступны.

96 голосов | спросил Simo D'lo Mafuxwana 7 FebruaryEurope/MoscowbFri, 07 Feb 2014 16:56:17 +0400000000pmFri, 07 Feb 2014 16:56:17 +040014 2014, 16:56:17

7 ответов


0

Прежде всего вам необходимо установить для responseType значение arraybuffer. Это необходимо, если вы хотите создать блоб ваших данных. Смотрите Sending_and_Receiving_Binary_Data . Итак, ваш код будет выглядеть так:

$http.post('/postUrlHere',{myParams}, {responseType:'arraybuffer'})
  .success(function (response) {
       var file = new Blob([response], {type: 'application/pdf'});
       var fileURL = URL.createObjectURL(file);
});

Следующая часть заключается в том, что вам необходимо использовать $ sce сервис, чтобы angular доверял вашему URL. Это можно сделать следующим образом:

$scope.content = $sce.trustAsResourceUrl(fileURL);

Не забудьте добавить $ sce сервис.

Если это все сделано, теперь вы можете встроить свой PDF:

<embed ng-src="{{content}}" style="width:200px;height:200px;"></embed>
ответил michael 12 FebruaryEurope/MoscowbWed, 12 Feb 2014 19:22:53 +0400000000pmWed, 12 Feb 2014 19:22:53 +040014 2014, 19:22:53
0

Я использую AngularJS v1.3.4

HTML:

<button ng-click="downloadPdf()" class="btn btn-primary">download PDF</button>

JS-контроллер:

'use strict';
angular.module('xxxxxxxxApp')
    .controller('xxxxController', function ($scope, xxxxServicePDF) {
        $scope.downloadPdf = function () {
            var fileName = "test.pdf";
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.style = "display: none";
            xxxxServicePDF.downloadPdf().then(function (result) {
                var file = new Blob([result.data], {type: 'application/pdf'});
                var fileURL = window.URL.createObjectURL(file);
                a.href = fileURL;
                a.download = fileName;
                a.click();
            });
        };
});

Службы JS:

angular.module('xxxxxxxxApp')
    .factory('xxxxServicePDF', function ($http) {
        return {
            downloadPdf: function () {
            return $http.get('api/downloadPDF', { responseType: 'arraybuffer' }).then(function (response) {
                return response;
            });
        }
    };
});

Веб-службы Java REST - Spring MVC:

@RequestMapping(value = "/downloadPDF", method = RequestMethod.GET, produces = "application/pdf")
    public ResponseEntity<byte[]> getPDF() {
        FileInputStream fileStream;
        try {
            fileStream = new FileInputStream(new File("C:\\xxxxx\\xxxxxx\\test.pdf"));
            byte[] contents = IOUtils.toByteArray(fileStream);
            HttpHeaders headers = new HttpHeaders();
            headers.setContentType(MediaType.parseMediaType("application/pdf"));
            String filename = "test.pdf";
            headers.setContentDispositionFormData(filename, filename);
            ResponseEntity<byte[]> response = new ResponseEntity<byte[]>(contents, headers, HttpStatus.OK);
            return response;
        } catch (FileNotFoundException e) {
           System.err.println(e);
        } catch (IOException e) {
            System.err.println(e);
        }
        return null;
    }
ответил sgrillon 22 Maypm15 2015, 22:54:14
0

предложения Майкла работают для меня как оберег :) Если вы замените $ http.post на $ http.get, помните, что метод .get принимает 2 параметра вместо 3 ... это то, что потрачено впустую мое время ...;)

контроллер:

$http.get('/getdoc/' + $stateParams.id,     
{responseType:'arraybuffer'})
  .success(function (response) {
     var file = new Blob([(response)], {type: 'application/pdf'});
     var fileURL = URL.createObjectURL(file);
     $scope.content = $sce.trustAsResourceUrl(fileURL);
});

Вид:

<object ng-show="content" data="{{content}}" type="application/pdf" style="width: 100%; height: 400px;"></object>
ответил Jan Tchärmän 11 J0000006Europe/Moscow 2015, 17:03:36
0

Я столкнулся с трудностями при использовании "window.URL" с Opera Browser, так как это привело бы к "undefined". Кроме того, с помощью window.URL документ PDF никогда не открывался в Internet Explorer и Microsoft Edge (он всегда будет ждать). Я разработал следующее решение, которое работает в IE, Edge, Firefox, Chrome и Opera (не тестировалось с Safari):

$http.post(postUrl, data, {responseType: 'arraybuffer'})
.success(success).error(failed);

function success(data) {
   openPDF(data.data, "myPDFdoc.pdf");
};

function failed(error) {...};

function openPDF(resData, fileName) {
    var ieEDGE = navigator.userAgent.match(/Edge/g);
    var ie = navigator.userAgent.match(/.NET/g); // IE 11+
    var oldIE = navigator.userAgent.match(/MSIE/g); 

    var blob = new window.Blob([resData], { type: 'application/pdf' });

    if (ie || oldIE || ieEDGE) {
       window.navigator.msSaveBlob(blob, fileName);
    }
    else {
       var reader = new window.FileReader();
       reader.onloadend = function () {
          window.location.href = reader.result;
       };
       reader.readAsDataURL(blob);
    }
}

Дайте мне знать, помогло ли это! :)

ответил Manuel Hernandez 9 Jam1000000amSat, 09 Jan 2016 00:41:18 +030016 2016, 00:41:18
0

Добавление responseType к запросу, сделанному из angular, действительно является решением, но для меня это не сработало, пока я не установил responseType в blob , а не arrayBuffer. Код не требует пояснений:

    $http({
            method : 'GET',
            url : 'api/paperAttachments/download/' + id,
            responseType: "blob"
        }).then(function successCallback(response) {
            console.log(response);
             var blob = new Blob([response.data]);
             FileSaver.saveAs(blob, getFileNameFromHttpResponse(response));
        }, function errorCallback(response) {   
        });
ответил ancab 27 MaramMon, 27 Mar 2017 11:20:45 +03002017-03-27T11:20:45+03:0011 2017, 11:20:45
0

Последние пару дней я пытался загрузить PDF-файлы и изображения. Все, что мне удалось загрузить, - это простые текстовые файлы.

Большинство вопросов имеют одинаковые компоненты, но потребовалось некоторое время, чтобы определить правильный порядок, чтобы он работал.

Спасибо @ Николай Мельников, ваш комментарий /ответ на этот вопрос заставил его работать.

Вкратце, вот мой внутренний вызов AngularJS Service:

  getDownloadUrl(fileID){
    //
    //Get the download url of the file
    let fullPath = this.paths.downloadServerURL + fileId;
    //
    // return the file as arraybuffer 
    return this.$http.get(fullPath, {
      headers: {
        'Authorization': 'Bearer ' + this.sessionService.getToken()
      },
      responseType: 'arraybuffer'
    });
  }

От моего контроллера:

downloadFile(){
   myService.getDownloadUrl(idOfTheFile).then( (response) => {
      //Create a new blob object
      let myBlobObject=new Blob([response.data],{ type:'application/pdf'});

      //Ideally the mime type can change based on the file extension
      //let myBlobObject=new Blob([response.data],{ type: mimeType});

      var url = window.URL || window.webkitURL
      var fileURL = url.createObjectURL(myBlobObject);
      var downloadLink = angular.element('<a></a>');
      downloadLink.attr('href',fileURL);
      downloadLink.attr('download',this.myFilesObj[documentId].name);
      downloadLink.attr('target','_self');
      downloadLink[0].click();//call click function
      url.revokeObjectURL(fileURL);//revoke the object from URL
    });
}
ответил Javier Carbajal 25 Jam1000000amWed, 25 Jan 2017 09:05:03 +030017 2017, 09:05:03
0

Предложение кода, который я только что использовал в своем проекте с использованием AngularJS v1.7.2

$http.get('LabelsPDF?ids=' + ids, { responseType: 'arraybuffer' })
            .then(function (response) {
                var file = new Blob([response.data], { type: 'application/pdf' });
                var fileURL = URL.createObjectURL(file);
                $scope.ContentPDF = $sce.trustAsResourceUrl(fileURL);
            });

<embed ng-src="{{ContentPDF}}" type="application/pdf" class="col-xs-12" style="height:100px; text-align:center;" />
ответил Fernando Magno 2 52018vEurope/Moscow11bEurope/MoscowFri, 02 Nov 2018 07:34:42 +0300 2018, 07:34:42

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132