How to Output HTML Form Data to Pdf

How do I output HTML form data to PDF?

I would have to respectfully disagree with Osvaldo. Using CSS to align on a printed document would take ages to do efficiently in the aspect of cross-browser integration. Plus, if Microsoft comes out with a new browser, you're going to have to constantly update for the new use in browsers.

If you know any PHP (Which, if you know JavaScript and HTML, basic PHP is very simple), here's a good library you can use, FDPF:

Thankfully, PHP doesn't deprecate a whole lot of methods and the total code is less than 10 lines if you have to go in and change things around.

Converting HTML form input to PDF - How to print more than 2 outputs

For your case applying jspdf.debug.js

Please enclose your string data by <div> (so use </div>TEXT</div>)
Please use £ for the pound sign (to avoid seeing weird characters when you view this character on page)

So please change your code (response.php) to:

<!DOCTYPE html>
<html>
<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js" ></script>
<script>
function generatePDF() {
 var doc = new jsPDF();  //create jsPDF object
  doc.fromHTML(document.getElementById("input_data"), // page element which you want to print as PDF
  15,
  15, 
  {
    'width': 170  //set width
  },
  function(a) 
   {
    doc.save("ClientInvoice.pdf"); // save file name as HTML2PDF.pdf
  });
}
</script>
</head>

  
  <body>
    <div id="input_data">
      <img src = "ff.png" width="150"><br>
      <h2>Invoice Reference: <?php echo $_POST["ref"]; ?></h2><br>
      <div>Customer name: <?php echo $_POST["cname"]; ?></div><br><br>
      <div>Item: <?php echo $_POST["i1"]; ?></div><br>  
      <div>£ <?php echo $_POST["c1"]; ?></div><br>
      <div>Item: <?php echo $_POST["i2"]; ?></div><br>
      <div>£ <?php echo $_POST["c2"]; ?></div><br>
      <div>Item: <?php echo $_POST["i3"]; ?></div><br>
      <div>£ <?php echo $_POST["c3"]; ?></div><br><br>
      <div>Total: <?php echo $_POST["t1"]; ?></div><br><br>
      <div>Thank you for choosing My Company.</div>
     </div>
    
<a href="javascript:generatePDF()">Dowload PDF</a>
  </body>
</html>

See a working version here:

http://www.createchhk.com/SOanswers/testSO17apr2022.html

download filled html form as pdf

try a plugin like
https://github.com/eKoopmans/html2pdf

download the source code and add

then

var element = document.getElementById('element-to-print');
 html2pdf(element, {
     margin:       1,
     filename:     'myfile.pdf',
     image:        { type: 'jpeg', quality: 0.98 },
     html2canvas:  { dpi: 192, letterRendering: true },
     jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait'}
});

hope this helps

Downloading HTML form as PDF file

You could probably use a library like https://github.com/eKoopmans/html2pdf.js

Submit HTML form to PDF

Update April 11, 2013:

Since posting this question I have been utilizing FPDF on multiple projects where I needed to accomplish this goal. Although it cannot seem to "merge" template PDFs with the provided data, it can create the PDF from scratch.

One example I have used, I had a high resolution PNG for printing (similar to initial question) which we had to write the customer's name and today's date clearly in the center. I simply made the background of the PDF using FPDF->Image() and write the text afterwards using FPDF->Text().

It was very simple after all, you will need to look up the paper sizes to determine the X,Y,W,H of the image and then base your text fields relative to those numbers.

There was even a Form Filling extension, but I couldn't get it to work.

It seems as though I should answer my own question, although Visions answer may be better (seems to be deleted?). I used Vasiliy Faronov's link which was a comment to my main question: https://stackoverflow.com/a/1890835/200445

Here I found how to install pdftk and run a command to merge (flatten) my FDF and PDF files. I still used the "hacky" way to generate an FDF using Koivi's FDF Generator but it works for the most part.

One caveat is that some characters, like single and double quotes are not inserted correctly. It may be an issue of escaping the fields, but I could not find an answer.

Regardless, my PDF form generator is working, but anyone with a similar issue should look for a better solution.