Отображать blob (.pdf) в угловом приложении

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

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

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:

  

Я не уверен, как справиться с этим в Angular, идеальная ситуация заключалась бы в том, чтобы (1) назначить его области, (2) «подготовить / перестроить» blob к pdf (3) передать его в HTML, используя потому что я хочу отобразить его в приложении.

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

Прежде всего вам нужно установить 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, чтобы сделать угловое доверие вашему URL. Это можно сделать следующим образом:

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

Не забудьте ввести услугу $ sce .

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

  

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

HTML:

  

JS-controller:

 '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 Web Services – Spring MVC:

 @RequestMapping(value = "/downloadPDF", method = RequestMethod.GET, produces = "application/pdf") public ResponseEntity 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 response = new ResponseEntity(contents, headers, HttpStatus.OK); return response; } catch (FileNotFoundException e) { System.err.println(e); } catch (IOException e) { System.err.println(e); } return null; } 

предложения michael работают как прелесть для меня 🙂 Если вы замените $ http.post на $ http.get, помните, что метод .get принимает 2 параметра вместо 3 … вот где пропало мое время …;)

controller:

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

Посмотреть:

  

Я столкнулся с трудностями, используя «window.URL» с браузером Opera, поскольку это приведет к «неопределенному». Кроме того, с 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); } } 

Дайте мне знать, если это поможет! 🙂

Добавление responseType в запрос, сделанный из углового, действительно является решением, но для меня это не сработало, пока я не установил 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) { }); 

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

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

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

Вкратце, вот мой брандмауэр службы AngularJS:

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

От моего controllerа:

 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(''); 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 }); } 
  • Как удалить водяной знак из файла PDF?
  • Создать PDF с помощью Java
  • Удаление пароля из файла PDF
  • Интеграция MuPDF Reader в приложении
  • Как конвертировать PDF / A в обычный PDF?
  • С тех пор, как Firefox обновился до версии 30, я получаю раздражающие разрешения на открытие PDF-файлов
  • JPG to PDF Convertor в C #
  • Автоматическое открытие диалогового windows принтера после загрузки PDF-файла
  • Бесплатные PDF-принтеры создают уродливые изображения?
  • Только PDF Загрузить
  • Создание PDF из Rails
  • Interesting Posts
    Давайте будем гением компьютера.