Assuming you know very very basics of Javascript, let’s start by making our little project directory. Open your terminal and write this command.

$ mkdir js-to-pdf && cd js-to-pdf

Pretty self-explanatory. We make the project and navigate into the project folder.

Next up, let's make the index.html file.

$ touch index.html

With the help of jsPDF package, we can generate PDFs from the client side. Grab the jsPDF CDN from here.

jsPDF — A library to generate PDFs in client-side JavaScript.

This is what we currently have

Side-note: In a real-world scenario we use NPM to install our dependencies. This is a lesson focused on the jsPDF library.

Okay, Let’s write some code. Not to worry, I will explain everything!

We add a <button></button> so we have a ‘get receipt’ button.

We new up the library, so we could use and reference it. Then we select the button Next up we add the 'click' event listener for the button and pass the printPDF callback. The reason why it’s printPDF and not printPDF() is because we don’t want to actually immediately fire the callback on page load. We want to fire the printPDF function once some clicks the button! And finally, we add a function called printPDF — this is where the actual PDF options lay. Oh and add these styles to the <head>

<style> button {

padding: 12px 50px;

border: none;

background-color: rgb(91,234,208);

color: #333;

cursor: pointer;

display: inline-block;

} </style>