jsPDF QR Code Tutorial & Code Samples - How To Generate A PDF With A QRCode using the pdfJS & qrCode.js Library

Photo by Artem Sapegin on Unsplash

So, our goal is to generate a PDF using the jsPDF library. In the PDF, we need to have a QR code. When the QR code is scanned it takes the user to a particular URL. Let us see how we can accomplish all this.

Part A: Generating A QR Code In JavaScript

To do this, we will be using the QRCode.js library. It's maintained by davidshimjs.

Below is a github gist with everything you need to do:

Here is a link to a JS fiddle so that you can see it in action.

Part B: Using jsPDF to Generate A PDF With The Generated QR Code

The plan is simple:

1. We add the jsPDF CDN url.
2. Create a new JS document.
3. Get the “base64version” of the generated QR code using some Javascript.
4. Use the “addImage” method to add the QR Code to the desired location in the document.

Let's look at some code:

Let us look at a working codepen.

Part C: There is a better way than all this!

We have developed a better way to generate PDFs. It's a simple drag and drop builder with QR Code support and many other things.

Check out PDFGenerator.cloud!