Gere Códigos QR com JavaScript
JavaScript é a linguagem mais popular para desenvolvimento web. Use bibliotecas como qrcode.js ou qr-code-styling para gerar códigos QR no navegador ou Node.js, ou chame a API do QRCode.fun para estilos avançados.
Instalação
Instale as bibliotecas populares de códigos QR JavaScript usando o seu gestor de pacotes preferido.
npm install qrcodeyarn add qrcodenpm install qr-code-stylingGerar Códigos QR com Bibliotecas JavaScript
Aqui estão exemplos de código usando bibliotecas populares de códigos QR JavaScript para gerar códigos QR nos seus projetos.
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' })Gerar Códigos QR via API em JavaScript
Use a API do QRCode.fun para gerar códigos QR estilizados com cores, formas e logotipos personalizados a partir da sua aplicação 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)Pré-visualização de Código QR ao Vivo
Experimente gerar um código QR com JavaScript agora mesmo.
Biblioteca Nativa vs API
Compare o uso direto de uma biblioteca de códigos QR JavaScript com a API do QRCode.fun.
| Funcionalidade | Biblioteca Nativa | QRCode.fun API |
|---|---|---|
| Complexidade de configuração | Instalar pacote, configurar bundler | Uma única requisição HTTP |
| Personalização | Varia conforme a biblioteca | Estilização completa: cores, formas, logotipos |
| Suporte offline | Sim | Requer internet |
| Manutenção | Atualizar dependências manualmente | Sempre atualizado |
| Formatos de saída | PNG, SVG (depende da biblioteca) | PNG, SVG |
Casos de Uso de Códigos QR em JavaScript
Cenários comuns onde desenvolvedores JavaScript geram códigos QR.
Aplicações Web
Gere códigos QR dinamicamente em aplicações web React, Vue, Angular ou JavaScript puro para partilhar links, pagamentos ou autenticação.
Backend Node.js
Crie códigos QR do lado do servidor para faturas, bilhetes, etiquetas de envio e anexos de e-mail automatizados.
Aplicações Web Progressivas
Adicione geração de códigos QR a PWAs para experiências móveis com capacidade offline e códigos escaneáveis.
Extensões de Navegador
Construa extensões Chrome ou Firefox que geram códigos QR para o URL da página atual ou texto selecionado.
Mergulho Profundo no Ecossistema de Códigos QR em JavaScript
JavaScript possui o ecossistema de códigos QR mais rico de qualquer linguagem, abrangendo ambientes de navegador, servidor e híbridos.
Integração com React, Vue e Angular
Os frameworks frontend modernos possuem componentes dedicados para códigos QR. react-qr-code fornece um componente React declarativo com renderização SVG. vue-qrcode oferece um composable Vue 3 com vinculação de dados reativa. Para Angular, angularx-qrcode encapsula a geração de QR numa diretiva. Estes wrappers específicos de framework tratam da gestão do ciclo de vida, reatividade e compatibilidade SSR automaticamente — fazendo com que a geração de QR pareça nativa em cada framework.
Renderização do Lado do Servidor (SSR) e Next.js
Ao usar Next.js, Nuxt ou outros frameworks SSR, a geração de códigos QR pode acontecer do lado do servidor durante a renderização ou do lado do cliente após a hidratação. A geração do lado do servidor com o pacote npm qrcode produz strings SVG estáticas que se incorporam diretamente no HTML — ideal para SEO e carregamentos iniciais rápidos. A geração do lado do cliente com qr-code-styling permite personalização interativa após o carregamento da página. A API QRCode.fun funciona a partir de ambos os ambientes via fetch.
Ecossistema npm e Considerações de Tamanho de Bundle
O ecossistema de códigos QR JavaScript oferece bibliotecas com diferentes compromissos de tamanho de bundle. O pacote principal qrcode tem ~33KB minificado e suporta Canvas e SVG. qr-code-styling adiciona personalização visual avançada com ~65KB. Para necessidades ultraleves, qrcode-generator tem menos de 10KB. Ao escolher uma biblioteca, considere o seu orçamento de bundle: uma landing page pode preferir a abordagem API (custo de bundle zero), enquanto uma PWA offline se beneficia de uma biblioteca empacotada.
Perguntas Frequentes
Perguntas comuns sobre a geração de códigos QR com JavaScript.
Comece a gerar códigos QR com JavaScript
Use o nosso gerador online gratuito para códigos QR rápidos, ou integre a API no seu projeto JavaScript para geração automatizada.