Generar código de barras con JavaScript
Queres saber como generar código de barras con JavaScript utilizando la librería jsBarcode? A continuación te lo cuento, con detalles y ejemplos, para tener tu código de barras funcionando en menos de 2 minutos.
Aprovecho para recordarte que si estas buscando como generar un código QR usando JavaScript, tengo otro posteo similar publicado desde hace un tiempo.
Que es un código de barras?
Antes de pasar a la acción, vamos a poner un poco de contexto sobre lo que estamos hablando.
Un código de barras es una representación gráfica de datos, generalmente utilizada para rastrear artículos en inventarios y puntos de venta.
Consiste en una serie de líneas paralelas de diferentes anchos y espacios, que un escáner puede leer para obtener información.
Como funciona un código de barras?
Los códigos de barras funcionan mediante la reflexión de la luz infrarroja en el escáner. Las líneas más anchas reflejan más luz, mientras que las líneas más estrechas reflejan menos.
El patrón resultante es interpretado por el escáner y se convierte en información digital.
Existen diferentes tipos de códigos de barras, pero los mas conocidos son los formatos UPC / EAN, utilizados en todo el mundo. para etiquetar productos de consumo masivo, y es el código de barras, que se puede encontrar en cualquier producto de supermercado.
Ejemplo para generar código de barras con JavaScript
Ahora sí, vamos directo al ejemplo funcionando, directamente desde mi CodePen. para que puedas probar y modificar. Mas abajo te explico el código detalladamente para que sepas como implementar este sencillo ejemplo.
Toda la magia reside en la librería JsBarcode, que es la encargada de generar el código de barras con un simple llamado.
Como incluir el generador de código de barras en tu sitio web
En primer lugar, dentro del encabezado HTML, hay que incluir el llamado a la librería JsBarcode, de esta forma:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.3/JsBarcode.all.min.js"></script>
</head>
Luego, en el lugar donde quieres que aparezca el código de barras generado, simplemente agregar un grafico svg con un identificador. En este ejemplo, el id será barcode.
<svg id="barcode"></svg>
Y por ultimo, hay que incluir la llamada al script indicando dos parámetros. El identificador de la imagen (barcode) y el texto o numero que vamos a representar en el código de barras (Hola Mundo).
JsBarcode("#barcode", "Hola Mundo!");
Como personalizar el código de barras
Afortunadamente, las opciones para personalizar el código de barras son muchísimas y están muy bien detalladas en la web de los desarrolladores.
Pero a modo de muestra, te dejo algunos ejemplos para cambiar algunos parámetros y obtener un resultado diferente en la imagen generada.
1- Cambiar el formato del código
Por defecto, JsBarcode utiliza el formato CODE128, que es el mas universal y permite codificar los 128 caracteres ASCII. Pero si necesitamos usar otro formato, como el EAN-13, que identifica todos los productos de consumo, solo hay que indicarlo en la llamada de esta forma:
JsBarcode("#barras", "123456789012", {
format: "EAN13"
});
2- Cambiar el estilo de la tipografía
Si quieres modificar la forma en que se muestran los textos de la imagen, es tan simple como añadir parámetros para jugar con el formato, de esta forma:
JsBarcode("#barcode", "Bold text", {
fontOptions: "bold"
});
JsBarcode("#barcode", "Italic text", {
fontOptions: "italic"
});
JsBarcode("#barcode", "Both options", {
fontOptions: "bold italic"
});
Así se verán los resultados:
3- Cambiar la tipografía
En este caso, la tipografía usada en el código de barras puede ser cualquiera de las fuentes por defecto. O alguna de las fuentes que hayas definido en la regla @font-face de tu hoja de estilos CSS.
JsBarcode("#barcode", "Fantasy font", {
font: "fantasy"
});
4- Cambiar los colores del código de barras
Los colores utilizados, por defecto, son el blanco para el fondo y el negro para las líneas. Pero eso se puede modificar muy fácilmente con dos parámetros: background y lineColor
JsBarcode("#barcode", "Blue background", {
background: "#ccffff"
});
JsBarcode("#barcode", "Red lines", {
lineColor: "#990000"
});
Estos son solo algunos de los parámetros que pueden usarse para personalizar el código de barras generado con JavaScript.
Pero existen muchas opciones mas, por ejemplo, cambiar los márgenes, la alineación del texto, el tamaño, la altura o el ancho. Si quieres explorar un poco mas, todas las opciones están muy bien explicadas en la web del proyecto.
Espero que este articulo te ayude a generar código de barras con JavaScript para implementarlo en tu sitio web o en el desarrollo en que estés trabajando.
Y si estas pensando en hacer lo mismo, pero usando código QR en lugar de código de barras, te recuerdo que tengo otro posteo donde explico como generar un código QR usando JavaScript, en detalle y con ejemplos funcionales.
Si te gustó o te entretuvo el contenido de este posteo, haciendo un click en los avisos me ayudas a mantener el sitio con vida y a seguir publicando.
Y si quieres ganar algo de dinero sin esfuerzo, registrate en Honeygain desde este banner y recibí 5 dolares de regalo al comenzar a usar la aplicación para generar ingresos pasivos.
Acá puedes conocer más sobre ingresos pasivos, que es y como funciona HoneyGain.