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!

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

TABLE OF CONTENTS

JS Generate QR

Download & Notes

Extra Bits & Links

The End

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.

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

LINKS & REFERENCES

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

INFOGRAPHIC CHEAT SHEET