How to make a pdf from user input on website

Problem: Generate a pdf on a website (client side) with user input.

Solution: Use the pdfMake library! To get started, make a html file:

<!DOCTYPE html>

<html>

<head>

<title>pdfmake - Basic Example with User Input</title>

function makePdf() {

let dd = {

content: [

'Hello {name}!'

]

}

let n = document.getElementById("inputName").value;

dd = JSON.stringify(dd);

dd = dd.replace(/{name}/g, n);

dd = JSON.parse(dd);

pdfMake.createPdf(dd).download("hello.pdf");

}

</script>

<style>

html {

display: table;

margin: auto;

}

</style>

</head>

<body>

<h1>Basic Example - pdfmake</h1>

<h2>Insert a name</h2>

</body>

</html>

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>pdfmake - Basic Example with User Input</title> <script src="pdfmake.js">// https://raw.githubusercontent.com/bpampuch/pdfmake/master/build/pdfmake.js </script> <script src="vfs_fonts.js">// https://raw.githubusercontent.com/bpampuch/pdfmake/master/build/vfs_fonts.js </script> <script> function makePdf() { let dd = { content: [ 'Hello {name}!' ] } let n = document.getElementById("inputName").value; dd = JSON.stringify(dd); dd = dd.replace(/{name}/g, n); dd = JSON.parse(dd); pdfMake.createPdf(dd).download("hello.pdf"); } </script> <style> html { display: table; margin: auto; } </style> </head> <body> <h1>Basic Example - pdfmake</h1> <h2>Insert a name</h2> <input type="text" id="inputName" value=""><br><br> <button onclick="makePdf()">Make PDF</button> </body> </html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>pdfmake - Basic Example with User Input</title>
    <script src="pdfmake.js">// https://raw.githubusercontent.com/bpampuch/pdfmake/master/build/pdfmake.js </script>
    <script src="vfs_fonts.js">// https://raw.githubusercontent.com/bpampuch/pdfmake/master/build/vfs_fonts.js </script>
    <script>
      function makePdf() {
        let dd = {
          content: [
            'Hello {name}!'
          ]
        }
        let n = document.getElementById("inputName").value;
        dd = JSON.stringify(dd);
        dd = dd.replace(/{name}/g, n);
        dd = JSON.parse(dd);
        pdfMake.createPdf(dd).download("hello.pdf");
      }
    </script>
    <style>
      html {
        display: table;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <h1>Basic Example - pdfmake</h1>
    <h2>Insert a name</h2>
    <input type="text" id="inputName" value=""><br><br>    
    <button onclick="makePdf()">Make PDF</button>
  </body>
</html>

Save the above code as an html file. Also save the two scripts (pdfmake.js and vfs_fonts.js) in the same folder.

Then open the html file in a browser, fill in a name, and click the button. You should now be able to save or open a pdf file:

The pdf file:

The json object dd contains the blueprint for the pdf. The playgroud is very useful for building more complicated pdfs.

Since dd is a json object it needs to be stringified to replace {name} with the user input. If you need to make several replacements I recommend this function:

function jsonReplaceAll(obj, searchvalue, newvalue) {

var re = new RegExp(searchvalue,"g")

obj = JSON.stringify(obj).replace(re, newvalue)

return JSON.parse(obj);

}

function jsonReplaceAll(obj, searchvalue, newvalue) { var re = new RegExp(searchvalue,"g") obj = JSON.stringify(obj).replace(re, newvalue) return JSON.parse(obj); }

function jsonReplaceAll(obj, searchvalue, newvalue) {
  var re = new RegExp(searchvalue,"g")
  obj = JSON.stringify(obj).replace(re, newvalue)
  return JSON.parse(obj);
}

Categories: Uncategorized

Tags: javascript, js, json, pdf, pdfkit, pdfmake

JP Janssen

How to make a pdf from user input on website