QRCode.Fun QRCode.Fun
Comenzar
Biblioteca de Códigos QR en JavaScript

Genera Códigos QR con JavaScript

JavaScript es el lenguaje más popular para el desarrollo web. Usa bibliotecas como qrcode.js o qr-code-styling para generar códigos QR en el navegador o Node.js, o llama a la API de QRCode.fun para estilos avanzados.

Probar Generador de QRVer Documentación de API

Instalación

Instala las bibliotecas populares de códigos QR en JavaScript usando tu gestor de paquetes preferido.

npm
npm install qrcode
yarn
yarn add qrcode
npm (styled)
npm install qr-code-styling

Genera Códigos QR con Bibliotecas de JavaScript

Aquí hay ejemplos de código usando bibliotecas populares de códigos QR en JavaScript para generar códigos QR en tus proyectos.

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' })
QRCode.fun API

Genera Códigos QR vía API en JavaScript

Usa la API de QRCode.fun para generar códigos QR estilizados con colores, formas y logotipos personalizados desde tu aplicación JavaScript.

Integración de API en 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)

Vista Previa de Código QR en Vivo

Prueba a generar un código QR con JavaScript ahora mismo.

Vista previa QR

Biblioteca Nativa vs API

Compara el uso directo de una biblioteca de códigos QR en JavaScript con la API de QRCode.fun.

CaracterísticaBiblioteca NativaQRCode.fun API
Complejidad de configuraciónInstalar paquete, configurar bundlerUna sola solicitud HTTP
PersonalizaciónVaría según la bibliotecaEstilizado completo: colores, formas, logotipos
Soporte sin conexiónSíRequiere internet
MantenimientoActualizar dependencias manualmenteSiempre actualizado
Formatos de salidaPNG, SVG (depende de la biblioteca)PNG, SVG

Casos de Uso de Códigos QR en JavaScript

Escenarios comunes donde los desarrolladores de JavaScript generan códigos QR.

Aplicaciones Web

Genera códigos QR dinámicamente en aplicaciones web React, Vue, Angular o JavaScript puro para compartir enlaces, pagos o autenticación.

Backend Node.js

Crea códigos QR del lado del servidor para facturas, boletos, etiquetas de envío y archivos adjuntos de correo electrónico automatizados.

Aplicaciones Web Progresivas

Agrega generación de códigos QR a PWAs para experiencias móviles con capacidad sin conexión con códigos escaneables.

Extensiones de Navegador

Construye extensiones de Chrome o Firefox que generan códigos QR para la URL de la página actual o el texto seleccionado.

Preguntas Frecuentes

Preguntas comunes sobre la generación de códigos QR con JavaScript.

Las dos opciones más populares son qrcode (ligera, ideal para códigos QR simples) y qr-code-styling (personalización avanzada con colores, formas y logotipos). Elige qrcode para simplicidad o qr-code-styling para flexibilidad de diseño.

Comienza a generar códigos QR con JavaScript

Usa nuestro generador en línea gratuito para códigos QR rápidos, o integra la API en tu proyecto JavaScript para generación automatizada.

Abrir Generador de QRExplorar Documentación de API