Laravel How to create and download PDF from view on same route

Question

I have a laravel-application where I want to generate a PDF from the values, the user has entered in some input fields. So when the user has entered the data, he clicks a button which generates the PDF and downloads it immediately afterwards automatically. All this should happen on the same route/view. The PDF should not be stored somewhere.

So right now, when I click the button, the entered Data gets through, e.g. stored in the DB, and it seems that a PDF is created, but I can't see or find it, and my browser does not inform me that there is a PDF available for download.

Before I started, I installed the laravel-dompdf-plugin, and followed the instructions.

So my route look like this

Route::view('formpage', 'app.statement')->name('statement'); // The blade view with the Form

Route::post('statement', 'MyController@generatePDF')->name('generatePDF'); // this is where I post the form

This is my controller

use PDF;

class MyController extends Controller {

  public function generatePDF(Request $request){

    $statement = Statement::create([
        'name' => $validated['name'],
        'email' => $validated['email'],
        'phone' => $validated['phone'],
        'declaration_date' => $validated['declaration_date'],
    ]);

    $pdf = PDF::loadView('pdf.statement', $statement);

    return $pdf->download('File__'.$statement->name.'.pdf');

  }

}

I posting the form with javascript by using axios by simply doing this:

$('#submitBtn').click(function(e) {
  const formData = new FormData();

  formData.append(
     "name",
     $("#statement")
        .find('input[name="name"]')
        .val()
   );

   ...etc with all other fields

  axios.post($("#statement form").attr("action"), formData)
            .then(response => {
               $('#submitBtn')
                    .attr("disabled", "disabled")
                    .addClass("disabled")
                    .html('<i class="fas fa-fw fa-check"></i> Success'); */
                $("#statement form")[0].reset();
            })
            .catch(error => {
                console.log("ERR: ", error); // DEBUG

                $("#statement .text-danger").show();

                $('#sworn-statement button[type="submit"]')
                    .removeAttr("disabled")
                    .removeClass("disabled")
                    .html("Send");
            });

}

What am I doing wrong?

UPDATE

I tried to do this:

const FileDownload = require("js-file-download");

axios.post($("#statement form").attr("action"), formData)
     .then(response => {
          FileDownload(response.data,"File.pdf");
     }).catch(error => {
         console.log('error:', error); 
     });

which gives me a blank page.

Answer 1

So as I said in the comments your problem is that the file is in the response you get from the axios POST request. If you don't handle the filedownload after you get the response nothing will happen.

You can use the js-file-download module. After you've installed this module you can modify your code to something like this:

const FileDownload = require('js-file-download');

axios.get(YOUR_URL)
   .then((response) => {
        FileDownload(response.data, YOUR_FILE_NAME);
   });

---

There's also an another solution with JQuery which I got from that answer:

$.ajax({
    type: "POST",
    url: url,
    data: params,
    success: function(response, status, xhr) {
        // check for a filename
        var filename = "";
        var disposition = xhr.getResponseHeader('Content-Disposition');
        if (disposition && disposition.indexOf('attachment') !== -1) {
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
        }

        var type = xhr.getResponseHeader('Content-Type');
        var blob = new Blob([response], { type: type });

        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
            window.navigator.msSaveBlob(blob, filename);
        } else {
            var URL = window.URL || window.webkitURL;
            var downloadUrl = URL.createObjectURL(blob);

            if (filename) {
                // use HTML5 a[download] attribute to specify filename
                var a = document.createElement("a");
                // safari doesn't support this yet
                if (typeof a.download === 'undefined') {
                    window.location = downloadUrl;
                } else {
                    a.href = downloadUrl;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                }
            } else {
                window.location = downloadUrl;
            }

            setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
        }
    }
});

Just replace the url and params attributes with your stuff. This creates also a POST request and handles the incomming PDF file as filedownload after the response arrives.