Générer des Codes QR avec JavaScript
JavaScript est le langage le plus populaire pour le développement web. Utilisez des bibliothèques comme qrcode.js ou qr-code-styling pour générer des codes QR dans le navigateur ou Node.js, ou appelez l'API QRCode.fun pour des styles avancés.
Installation
Installez les bibliothèques populaires de codes QR JavaScript avec votre gestionnaire de paquets préféré.
npm install qrcodeyarn add qrcodenpm install qr-code-stylingGénérer des Codes QR avec les Bibliothèques JavaScript
Voici des exemples de code utilisant les bibliothèques populaires de codes QR JavaScript pour générer des codes QR dans vos projets.
Basic QR Code (Node.js)
const QRCode = require('qrcode')
// Generate QR code as data URL
const dataUrl = await QRCode.toDataURL('https://qrcode.fun')
console.log(dataUrl)
// Generate QR code as file
await QRCode.toFile('./qrcode.png', 'https://qrcode.fun', {
width: 300,
margin: 2,
color: {
dark: '#1A2B3C',
light: '#FFFFFF'
}
})Browser Canvas Rendering
import QRCode from 'qrcode'
const canvas = document.getElementById('canvas')
await QRCode.toCanvas(canvas, 'https://qrcode.fun', {
width: 256,
margin: 2,
color: {
dark: '#1A2B3C',
light: '#FFFFFF'
}
})Styled QR Code with Logo
import QRCodeStyling from 'qr-code-styling'
const qrCode = new QRCodeStyling({
width: 300,
height: 300,
data: 'https://qrcode.fun',
image: '/logo.png',
dotsOptions: {
color: '#1A2B3C',
type: 'rounded'
},
cornersSquareOptions: {
color: '#8564C3',
type: 'extra-rounded'
},
backgroundOptions: {
color: '#FFFFFF'
}
})
qrCode.append(document.getElementById('qr-container'))
qrCode.download({ extension: 'png' })Générer des Codes QR via API en JavaScript
Utilisez l'API QRCode.fun pour générer des codes QR stylisés avec des couleurs, formes et logos personnalisés depuis votre application JavaScript.
// Using fetch (Browser or Node.js 18+)
const response = await fetch('https://qrcode.fun/api/generate-qr-styled', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
data: 'https://qrcode.fun',
width: 300,
height: 300,
type: 'png',
margin: 10,
dotsOptions: {
color: '#1A2B3C',
type: 'rounded'
},
cornersSquareOptions: {
color: '#8564C3',
type: 'extra-rounded'
},
backgroundOptions: {
color: '#FFFFFF'
}
})
})
const result = await response.json()
// result.data contains the base64 PNG data URL
console.log(result.data)Aperçu du Code QR en Direct
Essayez de générer un code QR avec JavaScript maintenant.
Bibliothèque Native vs API
Comparez l'utilisation directe d'une bibliothèque de codes QR JavaScript avec l'API QRCode.fun.
| Fonctionnalité | Bibliothèque Native | QRCode.fun API |
|---|---|---|
| Complexité de configuration | Installer le paquet, configurer le bundler | Une seule requête HTTP |
| Personnalisation | Varie selon la bibliothèque | Stylisation complète : couleurs, formes, logos |
| Support hors ligne | Oui | Nécessite internet |
| Maintenance | Mettre à jour les dépendances manuellement | Toujours à jour |
| Formats de sortie | PNG, SVG (dépend de la bibliothèque) | PNG, SVG |
Cas d'Utilisation des Codes QR en JavaScript
Scénarios courants où les développeurs JavaScript génèrent des codes QR.
Applications Web
Générez des codes QR dynamiquement dans des applications web React, Vue, Angular ou JavaScript vanilla pour partager des liens, paiements ou authentification.
Backend Node.js
Créez des codes QR côté serveur pour des factures, billets, étiquettes d'expédition et pièces jointes d'e-mails automatisées.
Applications Web Progressives
Ajoutez la génération de codes QR aux PWA pour des expériences mobiles avec capacité hors ligne et codes scannables.
Extensions de Navigateur
Créez des extensions Chrome ou Firefox qui génèrent des codes QR pour l'URL de la page actuelle ou le texte sélectionné.
Plongée Approfondie dans l'Écosystème des Codes QR en JavaScript
JavaScript possède l'écosystème de codes QR le plus riche de tous les langages, couvrant les environnements navigateur, serveur et hybrides.
Intégration React, Vue et Angular
Les frameworks frontend modernes disposent chacun de composants dédiés pour les codes QR. react-qr-code fournit un composant React déclaratif avec rendu SVG. vue-qrcode offre un composable Vue 3 avec liaison de données réactive. Pour Angular, angularx-qrcode encapsule la génération QR dans une directive. Ces wrappers spécifiques aux frameworks gèrent automatiquement le cycle de vie, la réactivité et la compatibilité SSR — rendant la génération QR native dans chaque framework.
Rendu Côté Serveur (SSR) et Next.js
Avec Next.js, Nuxt ou d'autres frameworks SSR, la génération de codes QR peut se faire côté serveur pendant le rendu ou côté client après l'hydratation. La génération côté serveur avec le package npm qrcode produit des chaînes SVG statiques qui s'intègrent directement dans le HTML — idéal pour le SEO et les chargements initiaux rapides. La génération côté client avec qr-code-styling permet une personnalisation interactive après le chargement de la page. L'API QRCode.fun fonctionne depuis les deux environnements via fetch.
Écosystème npm et Considérations de Taille de Bundle
L'écosystème de codes QR JavaScript offre des bibliothèques avec différents compromis de taille de bundle. Le package principal qrcode fait ~33KB minifié et supporte Canvas et SVG. qr-code-styling ajoute une personnalisation visuelle avancée à ~65KB. Pour les besoins ultra-légers, qrcode-generator fait moins de 10KB. Lors du choix d'une bibliothèque, considérez votre budget de bundle : une page d'atterrissage pourrait préférer l'approche API (coût de bundle nul), tandis qu'une PWA hors ligne bénéficie d'une bibliothèque empaquetée.
Questions Fréquemment Posées
Questions courantes sur la génération de codes QR avec JavaScript.
Commencez à générer des codes QR avec JavaScript
Utilisez notre générateur en ligne gratuit pour des codes QR rapides, ou intégrez l'API dans votre projet JavaScript pour une génération automatisée.