Angular JS empty pdf in new window

Question

The problem is when i want to create PDF with angular js the file is empty

This is the scenario:

I have rest api, when i make get request response payload is like this :

JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9GaWx0ZXIvRmxhdGVEZWNvZGUvTGVuZ3RoIDE4NT4+c3RyZWFtCnicpY4xD4JADIX3+xVvxEV7PeDAUYXBSZNzMg4EkGgCRIiD/144B41RNCF9aZO2r18vYmGE8hGQD5OJyIitYKz7rgR10efAZZhSzGIJSTBH4UzMud99rhDS8tXkMbTmqf9mJDtuCuEkbdYpexSr/iah+HB3f+hqZv/6TmQVQqtBZFVXt7K+trs2b0bSQhc+0wAsbk5Y5Smoc9DcCsvIgEnqkWylf7A3SQMeCXG1Bw4HIPIvwB0h835eCmVuZHN0cmVhbQplbmRvYmoKMSAwIG9iago8PC9UYWJzL1MvR3JvdXA8PC9TL1RyYW5zcGFyZW5jeS9UeXBlL0dyb3VwL0NTL0RldmljZVJHQj4+L0NvbnRlbnRzIDMgMCBSL1R5cGUvUGFnZS9SZXNvdXJjZXM8PC9Db2xvclNwYWNlPDwvQ1MvRGV2aWNlUkdCPj4vUHJvY1NldCBbL1BERiAvVGV4dCAvSW1hZ2VCIC9JbWFnZUMgL0ltYWdlSV0vRm9udDw8L0YxIDIgMCBSPj4+Pi9QYXJlbnQgNCAwIFIvTWVkaWFCb3hbMCAwIDU5NSA4NDJdPj4KZW5kb2JqCjUgMCBvYmoKWzEgMCBSL1hZWiAwIDg1MiAwXQplbmRvYmoKMiAwIG9iago8PC9TdWJ0eXBlL1R5cGUxL1R5cGUvRm9udC9CYXNlRm9udC9IZWx2ZXRpY2EvRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nPj4KZW5kb2JqCjQgMCBvYmoKPDwvS2lkc1sxIDAgUl0vVHlwZS9QYWdlcy9Db3VudCAxL0lUWFQoMi4xLjcpPj4KZW5kb2JqCjYgMCBvYmoKPDwvTmFtZXNbKEpSX1BBR0VfQU5DSE9SXzBfMSkgNSAwIFJdPj4KZW5kb2JqCjcgMCBvYmoKPDwvRGVzdHMgNiAwIFI+PgplbmRvYmoKOCAwIG9iago8PC9OYW1lcyA3IDAgUi9UeXBlL0NhdGFsb2cvUGFnZXMgNCAwIFIvVmlld2VyUHJlZmVyZW5jZXM8PC9QcmludFNjYWxpbmcvQXBwRGVmYXVsdD4+Pj4KZW5kb2JqCjkgMCBvYmoKPDwvTW9kRGF0ZShEOjIwMTcxMjA1MTgwNDM5KzAxJzAwJykvQ3JlYXRvcihKYXNwZXJSZXBvcnRzIExpYnJhcnkgdmVyc2lvbiA2LjEuMCkvQ3JlYXRpb25EYXRlKEQ6MjAxNzEyMDUxODA0MzkrMDEnMDAnKS9Qcm9kdWNlcihpVGV4dCAyLjEuNyBieSAxVDNYVCk+PgplbmRvYmoKeHJlZgowIDEwCjAwMDAwMDAwMDAgNjU1MzUgZiAKMDAwMDAwMDI2NyAwMDAwMCBuIAowMDAwMDAwNTQzIDAwMDAwIG4gCjAwMDAwMDAwMTUgMDAwMDAgbiAKMDAwMDAwMDYzMSAwMDAwMCBuIAowMDAwMDAwNTA4IDAwMDAwIG4gCjAwMDAwMDA2OTQgMDAwMDAgbiAKMDAwMDAwMDc0OCAwMDAwMCBuIAowMDAwMDAwNzgwIDAwMDAwIG4gCjAwMDAwMDA4ODMgMDAwMDAgbiAKdHJhaWxlcgo8PC9JbmZvIDkgMCBSL0lEIFs8MzlhYzY4ZDI4YjM4ZGYwNDcwNDM2YTM4ZjA2ZjI2MjY+PGMxNDNkNzJiMDE5M2ZmYzM5ZDMyM2UxNzlhN2QyNDdjPl0vUm9vdCA4IDAgUi9TaXplIDEwPj4Kc3RhcnR4cmVmCjEwNTAKJSVFT0YK

The response headers are

:

and the pdf is ok, with data in it.

The problem is when i make http get from angular :

$scope.confirmPayment = function(){
    $http.get(apiUrl).then(function(response) {
        console.log(response.data);
        var data = new Blob([response.data], { type: "application/pdf" });
        var fileURL = URL.createObjectURL(data);
        window.open(fileURL);
    });
};

the pdf is empty. why is this happening and how to fix it? The response payload in both requests is the same.

response headers in second call are:

console log is printing this

%PDF-1.4
%����
3 0 obj
<</Filter/FlateDecode/Length 178>>stream
x���1��@�����7⢽�w����mƁ��L������1�&�/m���녖�|�9k؜bK;�l���w��y �5���ŰG�&���>W�Y�j
���T��ٍے���w��ũ��(?���������ŏ`�Ads;7U1����������.2p����V���2#پ��ަ-d$$0!$�����w6~{�
endstream
endobj
1 0 obj
<</Tabs/S/Group<</S/Transparency/Type/Group/CS/DeviceRGB>>/Contents 3 0 R/Type/Page/Resources<</ColorSpace<</CS/DeviceRGB>>/ProcSet [/PDF /Text /ImageB /ImageC /ImageI]/Font<</F1 2 0 R>>>>/Parent 4 0 R/MediaBox[0 0 595 842]>>
endobj
5 0 obj
[1 0 R/XYZ 0 852 0]
endobj
2 0 obj
<</Subtype/Type1/Type/Font/BaseFont/Helvetica/Encoding/WinAnsiEncoding>>
endobj
4 0 obj
<</Kids[1 0 R]/Type/Pages/Count 1/ITXT(2.1.7)>>
endobj
6 0 obj
<</Names[(JR_PAGE_ANCHOR_0_1) 5 0 R]>>
endobj
7 0 obj
<</Dests 6 0 R>>
endobj
8 0 obj
<</Names 7 0 R/Type/Catalog/Pages 4 0 R/ViewerPreferences<</PrintScaling/AppDefault>>>>
endobj
9 0 obj
<</ModDate(D:20171205182420+01'00')/Creator(JasperReports Library version 6.1.0)/CreationDate(D:20171205182420+01'00')/Producer(iText 2.1.7 by 1T3XT)>>
endobj
xref
0 10
0000000000 65535 f 
0000000260 00000 n 
0000000536 00000 n 
0000000015 00000 n 
0000000624 00000 n 
0000000501 00000 n 
0000000687 00000 n 
0000000741 00000 n 
0000000773 00000 n 
0000000876 00000 n 
trailer
<</Info 9 0 R/ID [<1e77577afe299f8055a81e3d5141da79><eaf48da4dde2751fa6380537fbce1a72>]/Root 8 0 R/Size 10>>
startxref
1043
%%EOF
controller.home.js:7:7

Pranay Rana · Accepted Answer · 2017-12-11 13:53:14Z

1

Full blogpost for the same : Download File in Angular Js2 Application

Below is working for me , you can try out that , one thing you missed out that is RequestOptions({responseType: ResponseContentType.Blob}), another thing you missed is : <Blob>response.blob()

   ngOnInit(): void {
    this.getFile("http://localhost:1800/api/demo/GetTestFile")
    .subscribe(fileData => 
      {
      let b:any = new Blob([fileData], { type: 'application/zip' });
      var url= window.URL.createObjectURL(b);
        window.open(url);
      }
    );
  }

   public getFile(path: string):Observable<any>{
    let options = new RequestOptions({responseType: ResponseContentType.Blob});
    return this.http.get(path, options)
        .map((response: Response) => <Blob>response.blob())  ;
  }

edited Dec 11, 2017 at 13:53

answered Dec 5, 2017 at 17:39

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

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

2 Comments

zafirov Over a year ago

tnx Pranay, just added responseType:'blob' in options and it works

Pranay Rana Over a year ago

@zafirov - welcome , i reached to this code after wasting full one day ...

Collectives™ on Stack Overflow

Angular JS empty pdf in new window

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related