$http PDF download - invalid file

Question

I am trying to download a PDF file with $http service from AngularJS.

When I try to open the file it is invalid (Invalid Color Space) and the page ist blank.

Then I check:

1. From Firefox developer console - Network: I see the response object from the ajax call.
2. I set a breakpoint in my code: I see the response object returned from $http.

They are somehow different: ie

1. From developer console:

   "%PDF-1.4 % .........

2. From the $http:

   %PDF-1.4 %äãÏÒ.........

The same is happened to the whole document.

What am I doing wrong?

PS code:

downloadService.downloadPDF(response.url).then(
  function(response) {
    if (response) {
      var aTag = document.getElementById('downloadFile');
      aTag.setAttribute('href', 'data:application/pdf;charset=utf-8,' + encodeURIComponent(response));
      aTag.setAttribute('download', $scope.data.filename);
      aTag.click();
    }
  });

Response Headers:

Cache-Control:max-age=3600, must-revalidate
Content-Disposition:inline; filename=4550f2025f45cc2d14a403fbc1840160d4d052e4_598551722_300501.pdf
Content-Type:application/pdf
Date:Tue, 23 Oct 2018 11:17:44 GMT
Expires:0
Pragma:public
Server:Apache-Coyote/1.1
Set-Cookie:JSESSIONID=Y0kTkAV7GJLVRK1fKuZfffff; Expires=Thu, 01-Jan-1970 00:00:10 GMT; Path=/appbase; HttpOnly
Transfer-Encoding:chunked

Answer 1

encodeURIComponent does not do the needed BASE64 encoding

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

Have a look here:

https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

Or have a link to the file on the server