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:
<img id="codigo"/>Tiene el id codigo. Después, en el script:
/**
* Ejemplos de uso de JsBarcode
*
* @author parzibyte
*
* https://parzibyte.me/blog
*/
JsBarcode("#codigo", "123456");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:
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:
<img data-value="12345" data-text="Soy el texto" class="codigo"/>
<img data-value="666" class="codigo"/>
<img data-value="ABCDEF" class="codigo"/>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:
/**
* Ejemplos de uso de JsBarcode
*
* @author parzibyte
*
* https://parzibyte.me/blog
*/
JsBarcode(".codigo").init();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:
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:
<svg data-value="12345" data-text="Soy el texto" class="codigo"/></svg>Como estoy usando el segundo método, en el Script se hace esto:
/**
* Ejemplos de uso de JsBarcode
*
* @author parzibyte
*
* https://parzibyte.me/blog
*/
JsBarcode(".codigo").init();Con la ventaja de que ahora el código de barras será dibujado en un elemento SVG preservando su calidad.
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:
<canvas data-value="12345" data-text="Soy el texto" class="codigo"></canvas>Usando el mismo script:
/**
* Ejemplos de uso de JsBarcode
*
* @author parzibyte
*
* https://parzibyte.me/blog
*/
JsBarcode(".codigo").init();En este caso el código de barras se coloca sobre un canvas.
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):
/**
* Ejemplos de uso de JsBarcode
*
* @author parzibyte
*
* https://parzibyte.me/blog
*/
JsBarcode(".codigo")
.options({
format: "CODE128",// El formato
width: 2, // La anchura de cada barra
height: 30, // La altura del código
displayValue: true, // ¿Mostrar el valor (como texto) del código de barras?
text: "Hola", // Texto (no código) que acompaña al barcode
fontOptions: "bold", // Opciones de la fuente del texto del barcode
textAlign: "left", // En dónde poner el texto. center, left o right
textPosition: "top", // Poner el texto arriba (top) o abajo (bottom)
textMargin: 10, // Margen entre el texto y el código de barras
fontSize: 8, // Tamaño de la fuente
background: "#8bc34a", // Color de fondo
lineColor: "#FF0000", // Color de cada barra
marginTop: 10, // Margen superior
marginRight: 10, // Margen derecho
marginBottom: 5, // Margen inferior
marginLeft: 35, // Margen izquierdo
})
.init();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:
<canvas data-value="12345" class="codigo"></canvas>
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.
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Códigos de barras con JavaScript</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<main role="main" class="container">
<div class="row">
<div class="col-12" id="app">
<h1>Códigos de barras de productos</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<br>
<div id="contenedor"></div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
<script src="script.js"></script>
</body>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.
/**
* Ejemplos de uso de JsBarcode
*
* @author parzibyte
*
* https://parzibyte.me/blog
*/
const productos = [
{
nombre: "Mouse Logitech",
precio: 20,
codigo: "123",
},
{
nombre: "Xiaomi Mi A1",
precio: 5000,
codigo: "123444",
},
{
nombre: "Galletas",
precio: 10,
codigo: "20205",
},
{
nombre: "Computadora portátil",
precio: 30000,
codigo: "7700545",
},
];
const $contenedor = document.querySelector("#contenedor");
// Por cada producto, crear un SVG y adjuntarlo
productos.forEach(producto => {
const elemento = document.createElement("img");
elemento.dataset.format = "CODE128";
elemento.dataset.value = producto.codigo;
elemento.dataset.text = producto.nombre + " $" + producto.precio.toFixed(2);
elemento.classList.add("codigo");
$contenedor.appendChild(elemento);
});
// Al final, inicializamos
JsBarcode(".codigo").init();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:
Aprende más sobre JavaScript o HTML en mi blog.
