How to read pdf stream in angularjs

Question

I got the following PDF stream from a server:

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.

why do you transfer the whole file through http and not just open the url of that file? window.open(fileUrl)? — Marian Ban
– Marian Ban, Commented Sep 11, 2014 at 8:27
@MajoB I tried in that way also but in angular I'm getting error like Not allowed to load local resource: failed to load file path.. — User4567
– User4567, Commented Sep 11, 2014 at 8:51
Hi I am getting the same kind of response in Angular2, but i can't figure out how to handle such response in angular 2. I am getting an error "SyntaxError: Unexpected token % in JSON at position 0 at JSON.parse (<anonymous>) at Function.Json.parse" like this. — monica
– monica, Commented Nov 28, 2016 at 9:19

User4567 · Accepted Answer · 2014-09-12 12:46:00Z

51

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

answered Sep 12, 2014 at 12:46

User4567

1,0251 gold badge13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Andres Felipe Over a year ago

Ranjit, I was getting blank pdf but adding the "responseType" to the arguments of the $http, it works. I just figured it out, sorry about being late.

luisgepeto Over a year ago

hi I am getting a similar error as Ranjit. On chrome it says: Failed to load PDF document do you know how to solve this?

Sachin Sharma Over a year ago

I am still getting the same error, even after applying the fix.

oCcSking Over a year ago

@RanjitSingh see this ans And replace $window.open($sce.trustAsResourceUrl(fileURL));

Sateesh Kumar Alli Over a year ago

how to trigger download dialog box instead of opening it in new tab?

|

Gurupreet · Accepted Answer · 2015-06-11 17:09:55Z

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.

Lee Willis · Accepted Answer · 2014-09-11 08:54:44Z

1

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.

answered Sep 11, 2014 at 8:54

Lee Willis

1,5909 silver badges14 bronze badges

Comments

Vinay Adki · Accepted Answer · 2016-02-26 12:57:02Z

1

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();

answered Feb 26, 2016 at 12:57

Vinay Adki

1011 silver badge1 bronze badge

1 Comment

Vinay Adki Over a year ago

Controller : function downloadPDF(searchManagerQuery) { // calls get method $window.open('ServiceURL', '_blank'); }

Ed Greaves · Accepted Answer · 2017-04-21 19:53:39Z

1

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

answered Apr 21, 2017 at 19:53

Ed Greaves

4,9543 gold badges25 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to read pdf stream in angularjs

5 Answers 5

7 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related