Downloading generated PDF not working (mPDF)

I am trying to generate a simple PDF using PHP, JavaScript, AJAX and the library mPDF.

When pressing my generatePDF button, a JavaScript function is being executed which sends the request and logs the result in the console. The results in the console are raw binary data from the PDF so it is being generated, however my browser doesn’t show a download pop up for the PDF file i generated even though the Output function from mPDF uses the “D” value which stands for download.

I use a JQuery on click function to call the JS function

 $(document).on('click', '#generatePDF', function () {
     GeneratePDF();
 });
    function GeneratePDF() {

        $.ajax({
                type: "POST",
                data: {
                    "request": "generate-pdf"
                },
                success:function(data){
                    console.log(data);
                },
            })
    }

The PHP function below is executed after the request has been send

    public function GeneratePDF()
    {

        $mpdf = new \Mpdf\Mpdf();

        // Write some HTML code:
        $mpdf->WriteHTML('<p>Hello World</p>');

        // Output a PDF file directly to the browser
        $mpdf->Output('filename.pdf', 'D');

    }

I’m not familiar with mPDF or doing this with JS and AJAX.
But when I have done this with FPDF and pure PHP, I use something like the first example here, with headers to make a download.
https://www.php.net/manual/en/function.header.php#example-4416

I haven’t used jQuery in a very long time nor can I recall a time I needed to serve a PDF from a AJAX. However, I executed a search for “serving PDF download from jQuery” and it produced some useful results.

The important piece there is this snippet for the success function.

                success: function (data) {
                    //Convert the Byte Data to BLOB object.
                    var blob = new Blob([data], { type: "application/octetstream" });
 
                    //Check the Browser type and download the File.
                    var isIE = false || !!document.documentMode;
                    if (isIE) {
                        window.navigator.msSaveBlob(blob, fileName);
                    } else {
                        var url = window.URL || window.webkitURL;
                        link = url.createObjectURL(blob);
                        var a = $("<a />");
                        a.attr("download", fileName);
                        a.attr("href", link);
                        $("body").append(a);
                        a[0].click();
                        $("body").remove(a);
                    }
                }

So it looks like an object url needs to be generated from the response data which is a blob. Once the object url is generated it can be used as a link for an anchor tag that can programmatically be clicked to initiate the browsers PDF viewer.

I don’t think you want the “D” option part of the output function. The HTTP response from the server will need to be the blob data so that an object url can be created for browsers which support that.

Thanks for your reply!

I added the code and it works, a download pop up appears inside of my browser, However for some reason when i open te PDF file, i just see a blank page, while there should be a small text containing “Hello World”

Have you been able to confirmed the server side code is actually generating the proper pdf.
Do you have error logging enabled and have you looked at the logs.

changing the name of the file to .HTML helped me figure out that instead of PDF data, the file just consists of plain HTML. error logging is enabled for both php and the mPDF extension, but no error was returned when trying to generate a PDF.

So that means the PHP script is not working as intended. Have you been able to work through that issue.

Yes, the problem was that php didn’t recognise any request and therefore never executed the function.
I changed the way php validates the requests and this fixed the problem

1 Like