Utiliser les QR Codes

Dernière mise à jour le 23 mars 2026

L’ajout de QR codes dans les documents PDF est un besoin courant pour les factures, les étiquettes d’expédition, les billets d’événements, et bien d’autres cas. PDFMonkey prend en charge plusieurs bibliothèques JavaScript qui vous permettent de générer des QR codes directement dans vos templates, avec un contrôle total sur le style et le contenu.

Compte payant uniquement

Cette technique utilise JavaScript et n’est donc utilisable que sur un compte payant ou pendant votre période d’essai de 30 jours.

qr-code-styling (recommandé)

qr-code-styling est la bibliothèque que nous utilisons dans le Builder PDFMonkey. Elle offre le plus de personnalisation : plusieurs styles de points (square, dots, rounded, classy…), styles de coins, couleurs personnalisées, niveaux de correction d’erreur, et même un logo centré.

<script src="https://cdn.jsdelivr.net/npm/qr-code-styling@^1.6/lib/qr-code-styling.js"></script>

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

<script type="text/javascript">
  var qrCode = new QRCodeStyling({
    width: 200,
    height: 200,
    data: "https://pdfmonkey.io/",
    margin: 0,
    dotsOptions: {
      type: "rounded",
      color: "#0ea5e9"
    },
    cornersSquareOptions: {
     type: "extra-rounded"  // square, dot, extra-rounded
    }
  });

  qrCode.append(document.getElementById("qrcode"));
</script>

Vous pouvez également ajouter un logo au centre du QR code en passant image et imageOptions :

<script src="https://cdn.jsdelivr.net/npm/qr-code-styling@^1.6/lib/qr-code-styling.js"></script>

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

<script type="text/javascript">
  var qrCode = new QRCodeStyling({
    width: 200,
    height: 200,
    data: "https://pdfmonkey.io/",
    margin: 0,
    dotsOptions: {
      type: "rounded",
      color: "#0ea5e9"
    },
    cornersSquareOptions: {
     type: "extra-rounded"  // square, dot, extra-rounded
    },

    image: "https://example.com/logo.png",
    imageOptions: {
      imageSize: 0.4,
      margin: 4,
      crossOrigin: "anonymous"
    },
    qrOptions: {
      errorCorrectionLevel: "Q"  // utiliser Q ou H lorsqu’un logo est ajouté
    }
  });

  qrCode.append(document.getElementById("qrcode"));
</script>

QR code généré avec qr-code-styling

bitjson/qr-code

Cette bibliothèque offre un composant web très simple que vous pouvez utiliser pour insérer un QR Code dans votre document. Elle n’a aucune dépendance, vous pouvez donc simplement lier la bibliothèque via un CDN et insérer le composant dans votre code :

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

<!--
  contents : le texte à transformer
  module-color : couleur des points
  position-ring-color : couleur des grands carrés environnants
  position-center-color : couleur des petits carrés environnants
-->
<qr-code
  contents="https://pdfmonkey.io/"
  module-color="#0ea5e9"
  position-ring-color="#db7222"
  position-center-color="#27db22"
  style="width: 200px;"
></qr-code>

Évitez les animations

Les animations et le rendu PDF ne font généralement pas bon ménage. Évitez de copier-coller des morceaux de code qui utilisent des animations, ou retirez la partie animation, sinon le QR Code pourrait ne pas terminer son animation avant l’« impression », résultant en un QR Code absent ou incomplet.

Points uniquement

Le principal inconvénient de cette bibliothèque est que vous êtes limité au style des points. Vous ne pouvez obtenir que des cercles.

QRCode.js

Pour un QR Code d’aspect plus « classique », la bibliothèque QRCode.js est une bonne option. Elle n’offre pas beaucoup de personnalisation mais devrait suffire dans la plupart des cas.

<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>

Ces trois bibliothèques fonctionnent avec le moteur de rendu PDF de PDFMonkey. Pour en savoir plus sur le chargement et l’utilisation de JavaScript dans vos templates, consultez Custom JavaScript.

Questions fréquentes

Comment ajouter un QR code à un PDF PDFMonkey ?
Incluez une bibliothèque JavaScript de QR code via une balise script CDN dans votre HTML. PDFMonkey supporte qr-code-styling (recommandé), bitjson/qr-code et QRCode.js. Un forfait payant ou une période d’essai active est nécessaire car des scripts externes sont requis.
Quelle bibliothèque de QR code utiliser avec PDFMonkey ?
qr-code-styling est recommandé. C’est la bibliothèque qui offre le plus de personnalisation — styles de points, styles de coins, couleurs personnalisées, niveaux de correction d’erreur, et la possibilité d’intégrer un logo au centre du QR code.
Peut-on ajouter un logo à l’intérieur d’un QR code dans PDFMonkey ?
Oui. Utilisez la bibliothèque qr-code-styling et passez les propriétés image et imageOptions. Définissez le niveau de correction d’erreur sur Q ou H pour que le QR code reste lisible malgré le logo superposé.
Navigation