Generate QR Code With Javascript (Very Simple Examples)

Welcome to a tutorial on how to generate QR code with Javascript. Unfortunately, Javascript does not provide any native means to create QR codes. But thankfully, there are a whole load of libraries on the Internet that we can use today.

That’s all for the basics, but let us walk through a few more examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

1) BASIC QR CODE

<!-- (A) LOAD QRCODEJS LIBRARY -->
<!-- https://cdnjs.com/libraries/qrcodejs -->
<!-- https://github.com/davidshimjs/qrcodejs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<!-- (B) GENERATE QR CODE HERE -->
<div id="qrcode"></div>

<!-- (C) CREATE QR CODE ON PAGE LOAD -->
<script>
window.addEventListener("load", () => {
  var qrc = new QRCode(document.getElementById("qrcode"), "https://code-boxx.com/");
});
</script>

Yep, the basic usage as adapted from the official GitHub page is as easy as that:

1. Load the library. Download the entire script from Github and host it on your own, or use the CDN.
2. Create an empty <div> element to hold the QR code.
3. Finally, just use new QRCode(TARGET, TEXT) to create the QR code.

That’s all!

 

2) QR CODE OPTIONS

<script>
window.addEventListener("load", () => {
  var qrc = new QRCode(document.getElementById("qrcode"), {
    text: "https://code-boxx.com/",
    width: 100,
    height: 100,
    colorDark: "#ff0000",
    colorLight: "#ffffff",
    // QRCode.CorrectLevel.L | QRCode.CorrectLevel.M | QRCode.CorrectLevel.H
    correctLevel : QRCode.CorrectLevel.H
  });
});
</script>

For you guys who want some customizations, the library does offer a few basic options… Pretty self-explanatory.

 

 

3) QR FOR EMAIL, SMS, TEL, VCARD, ETC…

<!-- (B) GENERATE QR CODE HERE -->
Website <div id="qrA"></div>
Tel <div id="qrB"></div>
SMS <div id="qrC"></div>
VCARD <div id="qrD"></div>

<!-- (C) CREATE QR CODE ON PAGE LOAD -->
<!-- https://github.com/zxing/zxing/wiki/Barcode-Contents -->
<script>
window.addEventListener("load", () => {
  // (C1) WEBSITE
  new QRCode(document.getElementById("qrA"), "https://code-boxx.com/");
 
  // (C2) TEL
  new QRCode(document.getElementById("qrB"), "tel:+12345678");
 
  // (C3) SMS
  new QRCode(document.getElementById("qrC"), "sms:+12345678");
 
  // (C4) VCARD
  let card = "BEGIN:VCARD\r\n";
  card += "VERSION:3.0\r\n";
  card += "FN:John Doe\r\n";
  card += "TEL;TYPE=home:tel:+1-123-456-789";
  card += "EMAIL;TYPE=internet:john@doe.com";
  new QRCode(document.getElementById("qrD"), card);
});
</script>

Some beginners probably don’t know this, but QR codes can be used to do a plethora of things. These can be telephone numbers, SMS, email, vcard, event, open an app (deep linking), and even more. I shall leave a link to all the barcode data types in the extra section below.

 

4) PRINT PART OF THE PAGE WITH QR CODE

<!-- (B) QR CODE HERE -->
<div id="printable">
  <h1>FOO BAR!</h1>
  <p>This can be a Vcard, event, special offer, or something that you want users to print.</p>
  <div id="qrcode"></div>
</div>
<button id="qrprint">PRINT</button>
 
<!-- (C) CREATE QR CODE ON PAGE LOAD -->
<script>
window.addEventListener("load", () => {
  // (C1) CREATE QR
  var qrc = new QRCode(document.getElementById("qrcode"), {
    text: "https://code-boxx.com/",
    width: 100,
    height: 100,
    colorDark: "#bf2a2a"
  });

  // (C2) PRINT
  document.getElementById("qrprint").onclick = () => {
    var printwin = window.open("");
    printwin.document.write(document.getElementById("printable").innerHTML);
    printwin.stop();
    let qr = printwin.document.querySelector("#qrcode img");
    qr.addEventListener("load", () => {
      printwin.print();
      printwin.close();
    });
  });
});
</script>

This final example is kind of an extra. Yep, we can print part of a page containing the QR code. This can be pretty useful for stuff like VCARDs, events, discount coupons, and stuff.

 

 

 

LINKS & REFERENCES

• QRCode JS – Github
• Barcode Contents – Github
• How To Print A Page Using Javascript – Code Boxx

 

INFOGRAPHIC CHEAT SHEET