Server generated PDF angularjs with long post content

Question

After trying a lot of different approaches, nothing worked for me.

The most similar question is this one How to read pdf stream in angularjs

I have an AngularJS app that sends a request to my PHP-File to generate a PDF file. My controller has the following function that I call from a button via ng-click:

$scope.print = function() {
    $http({
        method : "post",
        url : '/pdf/print_processor.php',
        data : printdata,
        //responseType : 'arraybuffer',
        headers : {
            'Content-type' : 'application/json'
        }
    }).success(function(response, status, headers) {                        
     var file = new Blob([response], {type: 'application/pdf'});
        var fileURL = URL.createObjectURL(file);
        window.open(fileURL);
    });
}   

The main reason was that I have to ship some more data to the PHP file. The printdata variable contains a nested JSON object with more than 12 KB. So I could not use a normal GET or pass this data via a normal link as part of the URL.

The request is working, because I can call the print_processor.php directly (which gives me the PDF) and I use the same approach for creating sending email. Like in the mentioned question above, my response also contains the pdf itself:

%PDF-1.5
3 0 obj
<</Type /Page
/Parent 1 0 R
/Resources 2 0 R
/Group <</Type /Group /S /Transparency /CS /DeviceRGB>>
/Contents 4 0 R>>
endobj
4 0 obj
<</Filter /FlateDecode /Length 85>>
stream
...

But now I just want to give the PDF file to the browser exaclty like i would open the PHP-file directly... Although the controller opens a new window with the URL "blob:7e2d358f-00a1-4e33-9e7e-96cfe7c02688", the page is empty and I think, the URL is too short for the whole blob...

Some other similar questions are:

How to display a server side generated PDF stream in javascript sent via HttpMessageResponse Content

AngularJS: download pdf file from the server

How to read pdf stream in angularjs

AngularJS $http-post - convert binary to excel file and download

When I use the often mentioned responseType "arraybuffer" (which I commented out in the code above) - the result of the PHP is "null" and not the content of the PHP file. When it is not used, I get the PDF file... May be that is a hint?!

My Angular version is 1.2.26.

A total other solution I tried was calling the PHP directly (without ajax/angular controller) by using a form with post-method and a hidden field for the printdata. Since the printdata is a multi-level nested json object, it is not really possible to put it into the hidden field...

I hope someone has any other idea or find a mistake!?

Answer 1

Add params responseType, header and cache in $http like this :

$scope.print = function() {
    $http({
        method : "post",
        url : '/pdf/print_processor.php',
        data : printdata,
        responseType : 'arraybuffer',
        headers: {
                            accept: 'application/pdf'
        },
        cache: true,
    }).success(function(response, status, headers) {                        
     var file = new Blob([response], {type: 'application/pdf'});
        var fileURL = URL.createObjectURL(file);
        window.open(fileURL);
    });
}