Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to read pdf stream in angularjs

I got the following PDF stream from a server: PDF STREAM

How can this stream be read in AngularJS? I tried to open this as a PDF file in a new window by using the following code:

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

But I'm unable to see the content in opened window.

like image 315
User4567 Avatar asked Sep 11 '14 07:09

User4567


5 Answers

I achieved this by changing my controller code

$http.get('/retrievePDFFiles', {responseType: 'arraybuffer'})
       .success(function (data) {
           var file = new Blob([data], {type: 'application/pdf'});
           var fileURL = URL.createObjectURL(file);
           window.open(fileURL);
    });
like image 73
User4567 Avatar answered Nov 03 '22 18:11

User4567


Pleas have a look on the following code:

On Controller Side -

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

On HTML Side:

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

Also you can go with the Angular ng-pdfviewer and view your pdf by using it's js files.

like image 7
Gurupreet Avatar answered Nov 03 '22 17:11

Gurupreet


Have a look at PDF.JS. This is a client side javascript library that can fetch a pdf stream and render it client side. Angular is unable to read a pdf so this isn't an angular issue.

like image 1
Lee Willis Avatar answered Nov 03 '22 17:11

Lee Willis


Java: Get Method

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();
like image 1
Vinay Adki Avatar answered Nov 03 '22 19:11

Vinay Adki


The problem with using config.responseType is that the $http service still runs the default responseTransformer and attempts to convert the response to JSON. Also, you are sending the default accept headers. Here is an (untested) alternative:

$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);
    });
like image 1
Ed Greaves Avatar answered Nov 03 '22 19:11

Ed Greaves