Códigos de barras con JavaScript - Productos

Códigos de barras con JavaScript usando JSBarcode

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:

  1. SVG
  2. Canvas
  3. 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:

Generar códigos de barras con JavaScript
Ejemplo de generación de código de barras sobre una imagen (elemento img)

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:

Generando varios códigos de barras con JavaScript
Códigos de barras en imágenes usando JavaScript. Los valores se especifican en los atributos data-*

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:

Códigos de barras con JavaScript - Productos
Códigos de barras para productos, usando JSBarcode y un arreglo

Puedes probar el ejemplo aquí.

Aprende más sobre JavaScript o HTML en mi blog.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario