PDF QR Adder — añade códigos QR a cada página, 100% en tu navegador

Qué hace esta herramienta

Un procesador de PDF en navegador que añade códigos QR a cada página de tu documento. Cargas el PDF localmente (con drag&drop o file picker), eliges el tipo de QR (URL, vCard, email, Wi-Fi, coordenadas geo, texto libre), el modo de aplicación (misma metadata en todas las páginas, per-página personalizada con tabla editable, o auto anchor #page=N para deep-link), la posición dentro de la página (grid 3×3 con 9 opciones), el tamaño, el margen, la corrección de errores y el color. La herramienta genera los QR con qrcode-generator (vendored, dominio público) y los incrusta en el PDF con pdf-lib (vendored, MIT) usando embedPng / embedSvg. Al final te descargas el PDF modificado como Blob local. Todo el flujo ocurre en tu navegador, sin enviar nada a ningún servidor.

Casos de uso reales

• Manuales técnicos impresos con versión online. Imprimes un manual de 40 páginas y quieres que cada página tenga un QR que apunte a la versión online de ESA página concreta (no del documento entero). Usas el modo auto #page=N: introduces la URL base del manual online y automáticamente cada página lleva su deep-link.
• Facturas con vCard del comercial asignado. Una factura de 3 páginas donde la primera lleva la vCard del comercial que la emitió. Modo per-page: solo la fila 1 tiene contenido, filas 2 y 3 vacías. Esos quedan sin QR.
• Cartas de menú en un restaurante con Wi-Fi para clientes. Cada página del menú lleva un QR con las credenciales Wi-Fi del local. Mismo QR en todas (modo "misma metadata"): defines una vez, lo replica en cada página del menú.
• Dossier de propiedades inmobiliarias con URL única por piso. Un dossier de 8 propiedades: la página 1 lleva el QR de la propiedad 1, la página 2 el de la propiedad 2, etc. Modo per-page, una fila por página, cada fila con su URL correspondiente.
• Documentación interna sensible con verificación de email. Un PDF que se distribuye y quieres que el receptor pueda verificar autenticidad escribiéndote. Modo "misma metadata": QR mailto: en todas las páginas con tu email, asunto pre-rellenado "Verificar documento X" y cuerpo estándar.
• Eventos con geolocalización del venue. Un PDF con la programación del evento lleva en cada página un QR con las coordenadas del venue para que los asistentes abran Google Maps directamente desde su móvil.

Cómo se usa

1. Pulsa la zona Cargar PDF o arrastra un archivo a la dropzone. El PDF se carga localmente como ArrayBuffer.
2. Elige el tipo de QR: URL, vCard, email, Wi-Fi, geo o texto. Rellena los inputs del tipo elegido (cada tipo tiene los suyos).
3. Elige el modo de aplicación: misma en todas / per-página (tabla) / auto #page=N (URL base).
4. Define posición en el grid 3×3, tamaño, margen, corrección de errores y color. La preview sobre la primera página se actualiza en vivo.
5. Pulsa Procesar y descargar PDF. La herramienta parsea el PDF, genera los QR y los embebe. Aparece un progress indicator y al final se descarga el archivo .pdf.
6. Si quieres rehacerlo, pulsa Empezar de nuevo para limpiar el estado y cargar otro PDF.

Por qué esta herramienta

Las alternativas existentes (RauGen, PDFEdits, Sejda online, los editores genéricos tipo Smallpdf / iLovePDF / Adobe Acrobat online) tienen uno o varios de estos problemas: suben tu PDF a un servidor, exigen registro, dejan marca de agua, generan el mismo QR en todas las páginas sin posibilidad de variación, no soportan vCard/Wi-Fi/geo, no son bilingües, o no funcionan offline. Esta herramienta hace lo contrario: usa la File API para leer tu PDF como ArrayBuffer local, lo modifica con pdf-lib (MIT, vendored, sin upload) y genera los QR con qrcode-generator (dominio público, vendored). Resultado: privacidad total, cero marcas de agua, 6 tipos de QR, 3 modos de aplicación, bilingüe ES/EN, offline-ready tras primera carga. La monetización es Ko-Fi + AdSense, nunca con tus inputs.

Privacidad: Tus datos se quedan en tu navegador. Y una vez cargada, esta herramienta funciona sin internet.

Cómo funciona esta herramienta: el flujo client-side

Esta herramienta no es un editor PDF al uso ni pretende sustituir a Adobe Acrobat Pro. Es un procesador especializado construido sobre tres primitivas del navegador que, combinadas, resuelven un caso de uso muy concreto: insertar códigos QR en cada página de un PDF existente. La diferencia estructural con RauGen, PDFEdits, Sejda online y los editores genéricos tipo Smallpdf o iLovePDF es que absolutamente ningún byte de tu PDF sale del navegador. Vamos a ver el flujo técnico real, paso a paso.

Cuando arrastras un PDF a la dropzone o lo seleccionas con el picker, el navegador lo expone como un objeto File. Leemos sus bytes con await file.arrayBuffer() y se los pasamos a PDFDocument.load(arrayBuffer) de pdf-lib. pdf-lib parsea el PDF en memoria — todas sus páginas, fuentes, imágenes embebidas, anotaciones, streams de contenido — y nos da un objeto PDFDocument mutable. La librería está licenciada MIT, pesa ~525 KB minified, y se sirve localmente desde vendor/pdf-lib.min.js para garantizar el claim offline-ready.

Para generar el QR usamos qrcode-generator, una librería de Kazuhiko Arase en dominio público (~57 KB). El flujo es: const qr = qrcode(0, 'M') (tipo 0 = auto-detección del QR type necesario según los datos; nivel M = ~15% de corrección de errores, balance estándar entre densidad y robustez); qr.addData(stringAceptar); qr.make(). El objeto resultante expone getModuleCount() (cuántos módulos tiene el QR) y podemos obtener un SVG string con qr.createSvgTag({cellSize: 4, margin: 0, scalable: true}) o un PNG dataURL con qr.createDataURL(4, 0). Aquí viene la primera decisión técnica: ¿incrustamos como PNG o como SVG?

SVG es vectorial: pdf-lib lo incrusta con pdfDoc.embedSvg(svgString) y la calidad se mantiene perfecta a cualquier resolución de impresión. Pero embedSvg es más pesado en memoria y ligeramente más lento en parseo. PNG es raster: pdfDoc.embedPng(pngBuffer) lo mete como bitmap; pesa menos en memoria pero pierde calidad si el QR es pequeño en el PDF y el usuario imprime o hace zoom. Decisión implementada: PNG como default (mejor rendimiento, soporta el 95% de los casos: web, lectura en pantalla), SVG disponible cuando el usuario lo solicite o si la rasterización falla. La preview del paso 5 muestra el QR en su posición real sobre la primera página renderizada con canvas.drawImage, así el usuario ve exactamente cómo va a quedar antes de procesar.

El bucle de inserción recorre pdfDoc.getPages() — una por una — y para cada página llama a page.drawImage(qrImg, { x, y, width, height }). La coordenada (x, y) es la esquina inferior-izquierda del QR en el sistema de coordenadas PDF (origen bottom-left, Y crece hacia arriba), por eso la conversión desde el grid UI 3×3 (origen top-left, Y crece hacia abajo) requiere un flip vertical: y = page.getHeight() - margin - qrHeight - yFromTop. El grid 3×3 lo modelamos internamente como 9 posiciones: top-left (tl), top-center (tc), top-right (tr), middle-left (ml), middle-right (mr), bottom-left (bl), bottom-center (bc), bottom-right (br) — la opción "center" la tratamos como middle-center pero está reservada para futuro.

Para el modo per-página, después de cargar el PDF generamos una tabla con N filas (una por página). El usuario rellena las que quiere, deja vacías las que no. En el procesado, recorremos las filas y solo insertamos QR si rows[i].trim() !== ''. Para el modo auto #page=N, parseamos la URL base (validamos que sea http:// o https://), y construimos baseURL + '#page=' + (i+1) para cada página. Es importante entender que el anchor fragment #page=N es estándar en Adobe Acrobat, Foxit, Xodo y la mayoría de visores móviles; en Chrome PDF viewer no funciona todavía, pero el resto del ecosistema sí lo respeta.

Cómo usar la herramienta paso a paso

1. Carga el PDF. Arrastra el archivo a la zona central o haz clic. Si tu PDF es un informe, un manual, una factura, un menú, una carta — debería funcionar siempre que no esté cifrado con contraseña de apertura y tenga menos de 50 MB / 200 páginas.
2. Elige el tipo de QR. 6 opciones en grid visual: URL (enlace web), vCard (contacto), email (mailto), Wi-Fi (SSID+password), texto libre, geo (coordenadas). Cada tipo abre sus inputs específicos — por ejemplo, vCard pide nombre + email + teléfono + organización; Wi-Fi pide SSID + seguridad + password.
3. Elige el modo de aplicación. 3 opciones: misma metadata (un solo QR que se replica en todas las páginas), per-página (tabla editable, una fila por página, vacío = saltar), auto #page=N (URL base + sufijo automático).
4. Define posición y estilo. Grid 3×3 visual con 9 esquinas. Sliders de tamaño (50-200px) y margen (5-50px). Selector de corrección de errores L/M/Q/H (mayor corrección = QR más denso, menos capacidad de datos). Color picker para el QR (negro por defecto, pero puedes poner azul corporativo o cualquier color).
5. Verifica la preview. El canvas renderiza la primera página del PDF con el QR ya colocado. Si no te convence, ajusta posición/tamaño y vuelve a ver. La preview es solo de la primera página; el procesado real aplica la misma configuración a TODAS las páginas (o la fila correspondiente en per-page).
6. Procesa y descarga. Pulsa "Procesar y descargar PDF". El botón se desactiva, aparece un progress indicator con porcentaje. Cuando termina, se descarga automáticamente el archivo .pdf modificado.
7. Verifica el resultado. Abre el PDF descargado en tu visor habitual. Comprueba que los QR se ven correctamente y que al escanearlos con el móvil van a la URL correcta. Si algo no encaja, vuelve al paso 4 y ajusta.
8. Empieza de nuevo si quieres rehacerlo. El botón "Empezar de nuevo" limpia todo el estado y vuelve a la dropzone vacía, sin necesidad de recargar la página.

Casos de uso prácticos, a fondo

Ejemplo 1 — manual técnico impreso. Una empresa tiene un manual de uso de 40 páginas en PDF. Quiere imprimir 200 copias y que cada página tenga un QR al final para acceder a la versión online de ESA página (no del manual entero). Carga el PDF, elige tipo URL, modo "auto #page=N", introduce la URL base https://docs.empresa.com/manual, posición bottom-right, tamaño 80px, corrección M. Procesa. Resultado: 40 páginas con 40 QR distintos (#page=1, #page=2, etc.). Cuando alguien escanea el QR de la página 27 con Adobe Acrobat en su tablet, salta directamente a esa sección de la versión online.

Ejemplo 2 — factura multi-hoja con vCard del comercial. Una factura de 3 páginas: portada, detalle, condiciones. Solo la portada lleva la vCard del comercial que la emitió. Carga el PDF, tipo vCard (con nombre, email, teléfono), modo per-page. Tabla: fila 1 con los datos del comercial, filas 2 y 3 vacías. Posición top-right, tamaño 100px. Procesa. Solo la página 1 lleva el QR; las páginas 2 y 3 quedan intactas.

Ejemplo 3 — menú de restaurante con Wi-Fi. Un menú de 8 páginas en PDF, todas con el mismo QR Wi-Fi en la esquina inferior derecha para que los clientes se conecten fácilmente. Carga el PDF, tipo Wi-Fi (SSID "RestauranteX", WPA, password), modo "misma metadata", posición bottom-right, tamaño 90px. Procesa. Las 8 páginas llevan el mismo QR; cualquier cliente lo escanea una vez y queda guardado en su móvil.

Ejemplo 4 — dossier inmobiliario. Una agencia inmobiliaria tiene un dossier con 8 propiedades (1-2 páginas cada una, total 14 páginas). Cada página de cada propiedad debe llevar el QR de ESA propiedad (URL distinta en cada fila). Carga el PDF, tipo URL, modo per-page. Tabla con 14 filas; fila 1 = URL propiedad 1, fila 2 = URL propiedad 1 (la 2ª página), fila 3 = URL propiedad 2, etc. Posición bottom-center para que quede visible sin tapar las fotos. Procesa.

Ejemplo 5 — carta con email de verificación. Una organización distribuye PDFs de certificados y quiere que el receptor pueda verificar autenticidad. Tipo email, modo misma metadata, mailto con subject pre-rellenado "Verificar certificado" y body estándar. Cada página del certificado lleva el QR; al escanearlo se abre el cliente de correo con todo pre-rellenado. Comodidad + barrera baja para reportar.

Ejemplo 6 — programa de evento con geo. Un PDF con la programación de un evento al aire libre. Cada página lleva el QR con las coordenadas del venue para que los asistentes abran Google Maps. Tipo geo, latitud/longitud del sitio. Modo misma metadata, posición bottom-left. Procesa.

Consejos y trucos

• Elige el modo según la naturaleza del documento. Si TODAS las páginas llevan la misma info → "misma metadata". Si cada página es distinta → per-page. Si quieres deep-link a versión online → auto #page=N. Mezclar los tres es imposible en una sola ejecución; si lo necesitas, procesa varias veces y concatena los PDFs (con otra herramienta como iLovePDF o con pdf-lib directamente en consola).
• Corrección de errores L/M/Q/H. M (15%) es el default y el más equilibrado. Usa L (7%) si el QR va a imprimirse en alta calidad con color negro sólido — el QR será menos denso y caben más datos. Usa Q (25%) o H (30%) si el QR va a imprimirse en superficies rugosas, con baja calidad, o si va a llevar un logo encima (que no es nuestro caso, pero la lógica aplica).
• Tamaño según destino. 50-70px para PDFs que se ven en pantalla principalmente (informes digitales). 80-120px para PDFs que se imprimen en A4 y se ven a 30-50cm del lector. 130-200px para PDFs que se imprimen en gran formato (carteles, displays).
• El color del QR afecta la legibilidad. Negro sobre blanco siempre funciona. Otros colores oscuros (azul corporativo, verde) también, siempre que el contraste con el fondo sea suficiente. No uses QR claros (amarillo claro, naranja pastel) sobre fondos blancos: el contraste falla y el escáner no los lee.
• El margen entre QR y borde de página. Mínimo 5px para que no se "coma" el QR. Recomendado 15-25px para aspecto limpio. Más de 30px empieza a verse perdido.
• Si Safari no renderiza el PDF en la preview. El canvas usa pdfjs nativamente del navegador cuando está disponible; en algunos Safari antiguos no lo está y la preview queda en blanco. El procesado sigue funcionando correctamente, solo pierdes la verificación visual.
• Para PDFs muy grandes (>50 MB). Procesará, pero tardará. Si quieres acelerar, primero divide el PDF con otra herramienta (iLovePDF, Smallpdf, o qpdf local) y procesa cada parte por separado, luego vuelve a unir.
• El claim "100% privado" es literal. Esta herramienta NO envía tu PDF a ningún servidor. Ni siquiera estadísticas de uso. Si quieres verificarlo, abre DevTools → Network, carga un PDF, procesa: verás cero requests con tu contenido después de la carga inicial de la tool.
• El QR se incrusta como vectorial cuando es SVG. Esto significa que si tu PDF lo imprimes en plotter a tamaño gigante (A0, A1), el QR mantiene la nitidez perfecta. Si es PNG, puede pixelarse ligeramente.
• PDFs cifrados: desbloquéalos primero. qpdf --password=tuclave --decrypt input.pdf output.pdf en local, o Adobe Acrobat → Proteger → Eliminar contraseña. Luego procesa el output con esta herramienta.

Limitaciones y consideraciones

Esta herramienta es un procesador especializado, no un sistema de edición PDF general. Antes de plantearte usarla para flujos complejos, conviene entender exactamente qué cubre y qué NO cubre el MVP, y por qué en situaciones avanzadas necesitas un editor de escritorio.

Qué cubre el MVP

• Carga de un PDF local (File API / drag&drop) de hasta ~50 MB / 200 páginas con buena experiencia.
• Parseo local del PDF con pdf-lib (vendored MIT).
• Generación local de QR con qrcode-generator (vendored dominio público).
• 6 tipos de QR: URL, vCard 3.0, mailto, Wi-Fi, texto libre, geo URI.
• 3 modos de aplicación: misma en todas, per-page con tabla, auto #page=N.
• Posición en grid 3×3 (9 esquinas: 4 esquinas + 2 bordes verticales/horizontales + centro reservado).
• Tamaño 50-200 px, margen 5-50 px, corrección L/M/Q/H, color personalizable.
• Embed PNG por defecto, SVG como opción (vectorial).
• Preview en canvas sobre la primera página renderizada.
• Procesado por lotes con progress indicator, descarga como Blob local.
• Funcionamiento 100% offline tras la primera carga, gracias al Service Worker cache-first.
• Bilingüe ES/EN completo, switch persistente, claim-architecture explicada en 2 ubicaciones.

Qué NO cubre (queda fuera del alcance del MVP)

• Edición general del PDF: añadir/quitar texto, fusionar varios PDFs, comprimir, dividir, rotar, firmar digitalmente, OCR. Para eso, usa un editor general.
• Variación del tamaño o posición del QR por página: se aplica un único tamaño y posición a todo el documento (o, en per-page, el mismo tamaño/posición con texto variable).
• Múltiples QR por página: solo 1 QR por página en el MVP.
• QR con logo o marca visual: no incrustamos imagen central en el QR (técnica común para branding; podría añadirse en una iteración futura).
• Modos de aplicación mezclados: no puedes tener "misma en algunas páginas + per-page en otras" en una sola ejecución. Procesa varias veces si lo necesitas.
• PDFs cifrados: no soportamos contraseñas. Desbloquéalo primero con otra herramienta.
• PDFs escaneados (solo imágenes): la herramienta respeta las imágenes tal cual, pero no aplica OCR ni nada similar. Si lo que hay en el PDF es texto escaneado, el QR se incrusta encima de la imagen.
• Conversión de PDF a otros formatos (Word, Excel, JPG). No es nuestro scope.
• Anotaciones interactivas en el QR (PDF action handlers, JavaScript embebido en el QR). El QR es imagen inerte; no enlaza acciones PDF.
• Procesado por lotes de múltiples PDFs: solo 1 PDF a la vez. Procesa uno, guarda, carga el siguiente.
• Sincronización en la nube: no hay cuenta, no hay historial, no hay sync. Todo es local y efímero (hasta que recargas la página).
• Compatibilidad garantizada con visores PDF antiguos (<2010): los QR se ven, pero algunos visores muy antiguos pueden tener problemas con embedPng/embedSvg en ciertos contextos.
• Proyectos guardados, versionado, undo/redo. No es scope del MVP.
• Marca de agua propia persistente o branding corporativo.
• Generación de PDF desde cero. Esta herramienta MODIFICA PDFs existentes; no crea PDFs nuevos desde texto/HTML (para eso hay otras tools).

Cuándo necesitas un editor de PDF general en lugar de esta herramienta

Esta herramienta cubre el caso "tengo un PDF y quiero añadirle QR a cada página". Si tu proyecto entra en alguna de las siguientes categorías, considera usar un editor general:

• Proyectos donde necesitas edición PDF completa: añadir texto, imágenes, formas, firmas digitales.
• Combinación o división de múltiples PDFs (para eso, usa otra herramienta primero, luego procesa con esta).
• Conversión entre formatos (PDF a Word, PDF a Excel, PDF a JPG, etc.).
• OCR de PDFs escaneados.
• Protección con contraseña, redacción de información sensible.
• Formularios PDF rellenables.
• Compresión agresiva del PDF resultante.
• Firma digital avanzada con certificados.
• Anotaciones colaborativas en PDF.
• Conversión a PDF/A para archivo de larga duración.

Para todos estos casos, instala Adobe Acrobat Pro, Sejda Desktop, o un equivalente open source como PDFsam. Esta herramienta no compite con ellos: cubre el nicho especializado de "QR por página" donde instalar un editor general no se justifica.

Glosario rápido

pdf-lib

Librería JavaScript (MIT) para crear y modificar documentos PDF en el navegador o Node.js. Soporta carga, parseo, modificación (añadir páginas, imágenes, texto, formas) y exportación como Blob/Buffer/Base64. Ver pdf-lib.js.org.

qrcode-generator

Librería JavaScript de Kazuhiko Arase en dominio público. Genera QR Code modelo 2 según ISO/IEC 18004. Soporta 4 niveles de corrección de errores (L/M/Q/H) y 40 tipos numéricos. ~57 KB minified. Ver GitHub.

ArrayBuffer

Tipo de dato del navegador que representa un buffer binario crudo de longitud fija. Es lo que devuelve File.arrayBuffer() y lo que PDFDocument.load() acepta. A diferencia de Blob, no se almacena como archivo opaco sino como bytes accesibles.

File API

Conjunto de APIs del navegador (File, Blob, URL.createObjectURL, FileReader, File.arrayBuffer()) que permiten manejar archivos locales seleccionados por el usuario sin subirlos a un servidor. Es la base del manejo 100% client-side.

Service Worker

Script que el navegador ejecuta en segundo plano, separado de la página web, habilitando capacidades como caché offline de la tool. Aquí se usa un patrón cache-first: precache de HTML/CSS/JS/imágenes/vendor en la primera carga y respuesta desde caché en visitas posteriores, incluyendo sin conexión.

vCard 3.0

Formato estándar de tarjeta de contacto electrónica definido por la Internet Mail Consortium. Soporta nombre, email, teléfono, organización, dirección, etc. La mayoría de apps de contactos (iOS, Android, Outlook, Thunderbird) lo importan nativamente al escanear un QR que codifica un BEGIN:VCARD\n...\nEND:VCARD.

geo URI

Esquema URI estándar definido en RFC 5870 para representar coordenadas geográficas. Formato: geo:latitud,longitud. Al escanearlo, los móviles abren su app de mapas nativa (Google Maps, Apple Maps, etc.) centrada en esas coordenadas.

WIFI: URI

Formato no estándar pero ampliamente soportado para credenciales Wi-Fi en QR. Formato: WIFI:T:WPA;S:SSID;P:password;;. Soportado por iOS 11+, Android 9+ y la mayoría de apps de cámara modernas.

mailto: URI

Esquema URI estándar para email. Formato: mailto:destination@dominio?subject=...&body=.... Al escanearlo, abre el cliente de correo del usuario con todo pre-rellenado.

Anchor fragment

Parte de una URL tras el carácter #. En el contexto PDF, #page=N indica al visor que salte a la página N. Soportado por Adobe Acrobat, Foxit, Xodo, PDF.js con plugin. NO soportado por el visor PDF nativo de Chrome (todavía, propuesta en Chromium).

embedPng / embedSvg

Métodos de pdf-lib para incrustar imágenes PNG (raster) o SVG (vectorial) en un PDF. Devuelven un objeto PDFImage que luego se pasa a page.drawImage() con coordenadas y tamaño.

page.drawImage

Método de PDFPage que dibuja una imagen embebida en la página en las coordenadas especificadas. Coordenadas en sistema PDF (origen bottom-left, Y crece hacia arriba).

Corrección de errores (L/M/Q/H)

Niveles de corrección Reed-Solomon del QR Code. L = ~7%, M = ~15%, Q = ~25%, H = ~30%. Mayor corrección = QR más denso (más módulos para la misma cantidad de datos) pero más robusto ante daños físicos (manchas, arrugas, impresión de baja calidad).

Esta herramienta es un procesador especializado de QR por página. Para edición PDF general, considera Adobe Acrobat Pro u otro editor de escritorio. Versión 1.0.0 — 2026-07-01.