Using QR Codes

Learn how to insert custom QR Codes in your PDF documents using PDFMonkey.

When creating documents like flyers, shipping or packaging slips, or vouchers, our QR Code friend is now a np-brainer. We need it, period.

Here is how you can quickly get a QR Code for any dynamic data in your PDFMonkey template.

Paid account only

This technique uses JavaScript and is thus only usable on a paid account or during your 14-day trial.

JavaScript libraries

QR Code is not something new and, as you can expect, the JavaScript world is filled with libraries for it. Some are good, some others… exist.

Here are some pretty simple options we recommend:

bitjson/qr-code

This library offers a very simple web-component you can use to insert a QR Code in your document. It has no dependencies so you can simply link to the library using a CDN and insert the component in your code:

<script src="https://cdn.jsdelivr.net/npm/@bitjson/qr-code@^1.0/dist/qr-code.js"></script>

<!--
  contents: the text to transform
  module-color: color of the dots
  position-ring-color: color of the large surrounding squares
  position-center-color: color of the small surrounding squares
-->
<qr-code
  contents="https://pdfmonkey.io/"
  module-color="#db2777"
  position-ring-color="#db7222"
  position-center-color="#27db22"
  style="width: 200px;"
></qr-code>

Avoid animations

Animations and PDF rendering usually don't play nice. Avoid copy/pasting pieces of code that use animation, or removing the animation part, otherwise the QR Code might not finish its animation before "printing", resulting in an absent or incomplete QR Code.

Dots-only

The main drawback of this library is that your stuck with the style of the dots. You can only get circles.

QRCode.js

For a more "classic" looking QR Code, the QRCode.js library is a good option. It doesn't offer much customization but it should be good enough in most cases.

<script src="https://cdn.jsdelivr.net/npm/qrcodejs@^1.0/qrcode.min.js"></script>

<div id="qrcode"></div>

<script type="text/javascript">
  new QRCode(
    document.getElementById("qrcode"),
    {
      text: "http://pdfmonkey.io/",
      width: 200,
      height: 200,
      correctLevel: QRCode.CorrectLevel.L
    }
  );
</script>