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.

To generate QR codes in Javascript:

  1. Load the QR Code JS library from CDNJS.
  2. Create a <div id="qrcode"></div> HTML container.
  3. To generate the QR Code, simply create a new QRCode() object – var qrc = new QRCode(document.getElementById("qrcode"), "http://site.com/");

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

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

 

JAVASCRIPT QR CODE GENERATION

All right, let us now get into examples of how to generate QR codes using a library called QRCodeJS.

 

1) BASIC QR CODE

1-basic-qr.html
<!-- (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

2-options.html
<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…

3-types.html
<!-- (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>

Website

Tel

SMS

VCARD

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

4-print.html
<!-- (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>
FOO BAR!
This can be a Vcard, event, special offer, or something that you want users to print.

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.

 

 

EXTRA BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Generate QR Code In Javascript (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *