When attempting to generate a PDF with AngularJS, the file ends up empty.
Here is the scenario:
I have a REST API where the response payload from a GET request looks like this:
JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9GaWx0ZXIvRmxhdGVEZWNvZGUvTGVuG3RoIDE4NT4+c3RyZWFtCnicpY4xD4JADIX3+xVvxEV7PeDAUYXBSZNzMg4EkGgCRIiD/144B41RNCF9aZO2r18vYmGE8hGQD5OJyIitYKz7rgR10efAZZhSzGIJSTBH4UzMud99rhDS8tXkMbTmqf9mJDtuCuEkbdYpexSr/iah+HB3f+hqZv/6TmQVQqtBZFVXt7K+trs2b0bSQhc+0wAsbk5Y5Smoc9DcCsvIgEnqkWylf7A3SQMeCXG1Bw4HIPIvwB0h835eCmVuZHN0cmVhbQplbmRvoKMSAwIG9iago8PC9UYWJzLviRYlBBdSGVNMSkgNSAwIFIvTWVkaWAwaWs/cBF60Icb333hlJKFLFKSSANKnfb9ou2ZPabdabYpneMd; // and so on
The response headers are:
The PDF generated from this data is fine, with all the content intact.
The issue arises when I make an HTTP GET call from Angular as shown below:
$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 resulting PDF turns out to be empty. So, why does this happen and what can be done to resolve it? It's worth noting that the response payload in both requests remains consistent.
The response headers for the second call are:
Second Call Response Headers Image
The console log outputs the following:
%PDF-1.4
%
3 0 obj
<</Filter/GMG Read More Length 178>>stream
// continued log content...
controller.home.js:7:7