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

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:

Step 1: Add Reference To Your Code

Add the JS file to your code. Here is the CDN URL: https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js

Might be a good idea to add it to your project folder instead of simply linking.

<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>

Step 2: Add A Container DIV to your HTML to hold the QR Code

<div id="qr_code">
</div>

Step 3: Generate The QR Code

Put in the text you need to convert into your QR code instead of "###REPLACE MEEEE###"

	var qrcode = new QRCode("qr_code", {
	    text: "###REPLACE MEEEE###",
	    width: 128,
	    height: 128,
	    colorDark : "#000000",
	    colorLight : "#ffffff",
	    correctLevel : QRCode.CorrectLevel.H
	});

Thats it. You should see the QR code in the div.

view raw qrcodejs_how_to_use.md hosted with ❤ by GitHub

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:

Step 1: Add The jsPDF & QRCode.js CDNs to your document.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>

Step 2: Add A Div That Will Contain The QR Code

<div id="qr_code">
</div>

Step 3: Generate The QR Code & Add It To The Above Div

var qrcode = new QRCode("qr_code", {
    text: "https://cravecookie.com/",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

Step 4: Set Up The PDF Document & Add Some Text

var pdf = new jsPDF({
    orientation: "landscape",
    unit: "mm",
    format: [84, 41]
});

pdf.setFontSize(15);
pdf.text('Crave Cookie', 43, 20);

pdf.setFontSize(10);
pdf.text('Scan For Menu', 43, 25);

Step 5: Get The Base64 Image Code Of The Generated QR Code (Some JQuery to make it easy)

let base64Image = $('#qr_code img').attr('src');

Step 6: Add Image To PDF

pdf.addImage(base64Image, 'png', 0, 0, 40, 40);

view raw js-pdf-qr-code.md hosted with ❤ by GitHub

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!

Comments

[Bro Developer]

have you tried pdfmake?