Códigos de barras con JavaScript
En este post te voy a mostrar algunos ejemplos y usos de la librería JsBarcode para generar códigos de barras en elementos HTML usando JavaScript.
Vamos a generar códigos de barras con JavaScript en 3 elementos:
- SVG
- Canvas
- Imagen
Si deseas mantener la calidad del código de barras, recomiendo que uses el formato SVG.
Nota: esta librería no necesita otras librerías o dependencias, funciona con JavaScript puro y por lo tanto se puede usar en cualquier proyecto de JavaScript.
Incluir librería de JSBarcode
Para comenzar a usar esta librería de generación de códigos de barras en JavaScript hay que incluir el script.
En mi caso incluiré el siguiente:
https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js
Como ves, es la versión 3.11.0, si quieres una versión actualizada cuando visites este post, mira el repositorio en GitHub en el apartado de navegadores.
Ahora que hayas incluido el script, tienes el objeto JSBarcode
disponible globalmente.
Generación de códigos de barras
Para que JSBarcode funcione, existen dos formas.
Método 1 – Especificando con JavaScript
La primera es especificar un elemento con un id para después recuperarlo con JSBarcode.
Veamos el ejemplo. Primero debes definir el elemento en el HTML:
Tiene el id codigo
. Después, en el script:
Invocamos a JSBarcode y le pasamos el selector CSS. Como segundo argumento indicamos el valor que tendrá el código de barras.
La salida es:
Puedes probar el ejemplo aquí.
Nota: el método JSBarcode acepta un tercer argumento con opciones del código de barras. Lo veremos más adelante.
Método 2 – Con atributos HTML
Si quieres dibujar el barcode sin especificarlo con JavaScript, puedes especificar los atributos con los data-*
atributos.
Este método me parece mejor cuando tenemos elementos dinámicos o dibujados en el lado del servidor.
Vamos a ver un ejemplo. Voy a poner 3 elementos de imagen con códigos distintos y algunos atributos:
Ahora tenemos 3 imágenes, todas tienen la clase codigo
. Tenemos algunos atributos interesantes como data-value
que es el código de barras, o data-text
que es el texto que se muestra bajo el código de barras.
De cualquier modo, las 3 serán renderizadas en el script:
De nuevo estamos usando un selector CSS. Tomamos aquellos elementos que tengan la clase codigo
y llamamos a init
. Esto hará que se muestren los códigos de barras, usando los atributos definidos en el HTML.
El resultado es el siguiente:
Puedes probarlo aquí.
Estos son los métodos que existen. Puedes usar el que tú quieras. Ahora pasaremos a ver opciones de elementos y personalización de códigos de barras con JavaScript.
Generar código de barras en imagen (etiqueta img)
Como vimos en los ejemplos, los códigos de barras se pueden dibujar en imágenes. Lo que no me gustó de esto (basado en mi experiencia) es que al imprimirlas se distorsionan, en cambio con SVG no pasa esto.
Códigos de barras con JavaScript usando SVG
Recomiendo este enfoque, pues el código de barras igualmente se mostrará como los demás, pero con la ventaja de que será un vector escalable que no pierde calidad.
Para hacerlo, los dos métodos explicados anteriormente son válidos. Voy a poner un ejemplo, definimos el elemento:
Como estoy usando el segundo método, en el Script se hace esto:
Con la ventaja de que ahora el código de barras será dibujado en un elemento SVG preservando su calidad.
Puedes probarlo aquí.
La desventaja de esto es que no se pueden generar códigos SVG usando los atributos data-*
.
Códigos de barras con JavaScript usando Canvas
Lo mismo aplica con Canvas. Este método de igual manera no preserva la calidad al hacer zoom o imprimir, pero tiene la ventaja de que es un canvas que se puede, por ejemplo, convertir a imagen y descargar.
Definimos el elemento:
Usando el mismo script:
En este caso el código de barras se coloca sobre un canvas. Puedes probar el resultado aquí.
Opciones del código de barras
Veamos algunas opciones que podemos personalizar con JSBarcode. Pondré todas (exceptuando la de flat pues esa es de otro formato):
Cada opción tiene su comentario. Estas opciones pueden ser especificadas cuando usamos JSBarcode para un solo elemento, así:
JSBarcode(selector_elemento, código, opciones);
También se pueden especificar a través de los data-*
atributos en el HTML. Por ejemplo, para el background
:
data-background="#8bc34a"
O para el textPosition
:
data-textPosition="top"
En este caso puse solo un elemento:
El resultado es el siguiente:
Sé que no es la mejor combinación, solo estoy mostrando las opciones que tiene el código de barras.
Puedes probar el ejemplo aquí.
Nota: para los colores, además de usar la notación hexadecimal, puedes usar nombres como “black” o “red”.
Otro ejemplo: códigos de barras de productos
Para mostrar un ejemplo completo voy a dibujar algunos códigos de barras de determinados productos.
El HTML es el siguiente, en donde definimos un contenedor de los códigos de barras:
En el script tenemos un arreglo de productos. Lo declaramos y por cada producto agregamos un elemento al contenedor, colocando los atributos data-
a través de dataset
.
Gracias a eso, el código de barras tendrá el valor del código del producto, pero su texto será el nombre del producto así como su precio.
La clase codigo
se agrega con classList.add
Finalmente se hace el init
de JSBarcode. El resultado es:
Puedes probar el ejemplo aquí.
Aprende más sobre JavaScript o HTML en mi blog.