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, Sep 11 '14 at 08: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, Sep 11 '14 at 08:51
See this answer : http://stackoverflow.com/questions/21628378/angularjs-display-blob-pdf-in-an-angular-app — stacky, Sep 11 '14 at 09:04
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 () at Function.Json.parse" like this. — monica, Nov 28 '16 at 09:19

score 51 · Accepted Answer · answered Sep 12 '14 at 12:46

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 '14 at 12:46

User4567

1,005
1
12
27

7

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. – Andres Felipe Apr 01 '16 at 03:33
1

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? – luisgepeto May 15 '16 at 03:56
I am still getting the same error, even after applying the fix. – Sachin Sharma May 31 '16 at 21:59
@RanjitSingh see [this ans](http://stackoverflow.com/a/21732039/1509853) And replace $window.open($sce.trustAsResourceUrl(fileURL)); – oCcSking Jan 05 '17 at 09:19
how to trigger download dialog box instead of opening it in new tab? – Sateesh Kumar Alli Mar 28 '17 at 05:52
@MPPNBD no idea but i will try and let you know. – User4567 Jun 01 '18 at 10:30
the {responseType: 'arraybuffer'} did the trick for me. I am sending a MemoryStream from .NET Core and making the $http.post from Angularjs like this: return this.$http.post(url, Indata, { responseType: 'arraybuffer' }) .then(res => { return res }); – Shezi Jun 29 '18 at 18:03

score 7 · Answer 2 · answered Jun 11 '15 at 17:09

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.

score 1 · Answer 3 · answered Sep 11 '14 at 08:54

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 '14 at 08:54

Lee Willis

1,552
9
14

score 1 · Answer 4 · answered Feb 26 '16 at 12:57

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 '16 at 12:57

Vinay Adki

101
1
1

Controller : function downloadPDF(searchManagerQuery) { // calls get method $window.open('ServiceURL', '_blank'); } – Vinay Adki Feb 26 '16 at 12:58

score 1 · Answer 5 · answered Apr 21 '17 at 19:53

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

How to read pdf stream in angularjs

5 Answers5

Linked