Как да четем pdf поток в angularjs

Получих следния PDF поток от сървър: PDF ПОТОК

Как може този поток да бъде прочетен в AngularJS? Опитах се да отворя това като PDF файл в нов прозорец, като използвах следния код:

.success(function(data) {
   window.open("data:application/pdf," + escape(data));
 });

Но не мога да видя съдържанието в отворения прозорец.


person User4567    schedule 11.09.2014    source източник
comment
защо прехвърляте целия файл през http, а не отваряте само URL адреса на този файл? window.open(fileUrl)?   -  person Marian Ban    schedule 11.09.2014
comment
@MajoB Опитах и ​​по този начин, но в angular получавам грешка като Не е позволено да зарежда локален ресурс: не успя да зареди пътя на файла..   -  person User4567    schedule 11.09.2014
comment
Вижте този отговор: stackoverflow.com/questions/21628378/   -  person stacky    schedule 11.09.2014
comment
Здравейте, получавам същия вид отговор в Angular2, но не мога да разбера как да се справя с такъв отговор в angular 2. Получавам грешка SyntaxError: Unexpected token % в JSON на позиция 0 в JSON.parse (‹anonymous ›) във Function.Json.parse по този начин.   -  person monica    schedule 28.11.2016


Отговори (5)


Постигнах това, като промених кода на контролера си

$http.get('/retrievePDFFiles', {responseType: 'arraybuffer'})
       .success(function (data) {
           var file = new Blob([data], {type: 'application/pdf'});
           var fileURL = URL.createObjectURL(file);
           window.open(fileURL);
    });
person User4567    schedule 12.09.2014
comment
Ranjit, получавах празен pdf, но добавяне на responseType към аргументите на $http, работи. Току-що разбрах, съжалявам за закъснението. - person Andres Felipe; 01.04.2016
comment
здравей, получавам подобна грешка като Ranjit. В chrome пише: Неуспешно зареждане на PDF документ знаете ли как да реша това? - person Luis Becerril; 15.05.2016
comment
Все още получавам същата грешка, дори след прилагане на корекцията. - person Sachin Sharma; 01.06.2016
comment
@RanjitSingh вижте това и заменете $window.open($sce.trustAsResourceUrl(fileURL)); - person oCcSking; 05.01.2017
comment
как да задействам диалогов прозорец за изтегляне, вместо да го отварям в нов раздел? - person Sateesh Kumar Alli; 28.03.2017
comment
@MPPNBD нямам идея, но ще опитам и ще ви уведомя. - person User4567; 01.06.2018
comment
{responseType: 'arraybuffer'} свърши работа вместо мен. Изпращам MemoryStream от .NET Core и правя $http.post от Angularjs така: return this.$http.post(url, Indata, { responseType: 'arraybuffer' }) .then(res =› { return res }); - person Shezi; 29.06.2018

Моля, погледнете следния код:

От страната на контролера -

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

От страна на HTML:

<div ng-controller="PDFController" class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content" onloadstart="">
        <object data="{{pdfContent}}"  type="application/pdf" style="width:100%; height:1000px" />
    </div>
</div>

Също така можете да отидете с Angular ng-pdfviewer и да прегледате своя pdf, като използвате неговите js файлове.

person Gurupreet    schedule 11.06.2015

Разгледайте PDF.JS. Това е javascript библиотека от страна на клиента, която може да извлече pdf поток и да го изобрази от страна на клиента. Angular не може да прочете pdf, така че това не е проблем с angular.

person Lee Willis    schedule 11.09.2014

Java: Вземете метод

BLOB pdfData = getBlob_Data;
response.setContentType(pdfData.getContentType());
response.setHeader(ApplicationLiterals.HEADER_KEY_CONTENT, "attachment;     filename=FileName.pdf");
response.getOutputStream().write(pdfData.getBinaryData());
response.getOutputStream().flush();
person Vinay Adki    schedule 26.02.2016
comment
Контролер: функция изтеглянеPDF(searchManagerQuery) { // извиква метод за получаване $window.open('ServiceURL', '_blank'); } - person Vinay Adki; 26.02.2016

Проблемът с използването на config.responseType е, че $http услугата все още изпълнява по подразбиране responseTransformer и се опитва да конвертира отговора в JSON. Освен това вие изпращате заглавките за приемане по подразбиране. Ето една (непроверена) алтернатива:

$http.get('/retrievePDFFiles', {
    headers: { Accept: "application/pdf"},  
    transformResponse: function(data) {
        return new Blob([data], {type: 'application/pdf'});
    }}).success(function (data) {
           var fileURL = URL.createObjectURL(data);
           window.open(fileURL);
    });
person Ed Greaves    schedule 21.04.2017