blog banner

Genera códigos de barras en javascript

Genera códigos de barras online de manera fácil, copiando y pegando este javascript que he generado para celebrar el 30 aniversario de su creación.

Hoy se cumplen 30 añitos de la aparición del código de barras en España.
Para celebrarlo voy a publicar una rutina javascript que creo que puede ser útil en algún caso. Pintar códigos de barras JS+CSS.
El funcionamiento? sencillo. Simplemente una llamada a la función javascript codifica(código numérico, id codificación 1=EAN13/2=EAN8);

—— JS ———————————————–
function pintaCB(codif, codigoNum)
{
var HTMLresul=»<div class=»codigoBarras»>»;
var i=0;

while (codif[i])
{
switch(codif[i])
{
case «2»: HTMLresul=HTMLresul + («<div class=»inicio»>»);
break;
case «3»: HTMLresul=HTMLresul + («<div class=»medio»>»);
break;
case «4»: HTMLresul=HTMLresul + («<div class=»fin»>»);
break;
case «5»: HTMLresul=HTMLresul + («</div>»);
break;
default: break;

}
HTMLresul=HTMLresul + («<div class=»cb» + codif[i] + «»></div>»);
i++;
}
HTMLresul=HTMLresul + «<p class=»digitos»>» + codigoNum + «</p>»;
HTMLresul=HTMLresul + «</div>»;
document.write (HTMLresul);
}

function codifica(codigoNum, ean)
{
var EAN_izq1=new Array(‘0001101′,’0011001′,’0010011′,’0111101′,’0100011′,’0110001′,’0101111′,’0111011′,’0110111′,’0001011’);
var EAN_izq2=new Array(‘0100111′,’0110011′,’0011011′,’0100001′,’0011101′,’0111001′,’0000101′,’0010001′,’0001001′,’0010111’);
var EAN_der=new Array(‘1110010′,’1100110′,’1101100′,’1000010′,’1011100′,’1001110′,’1010000′,’1000100′,’1001000′,’1110100’);

var codif=new Array(‘11111′,’12122′,’12212′,’12221′,’21122′,’22112′,’22211′,’21212′,’21221′,’22121’);

if (ean==1) // codificación EAN13
{
var dib=»21015″;
//101 inicio. agregamos 2 como digito identificador y 5 al final, para poder representar por css como clase diferente
dib= dib + EAN_izq1[Number(codigoNum.charAt(1))]; //el digito 1 siempre codificacion 1
for(var i=2;i<7;i++)
{
if (codif[Number(codigoNum.charAt(0))].charAt(i-1)==2)
{

dib= dib + EAN_izq1[Number(codigoNum.charAt(i))];}
else
{
dib= dib + EAN_izq2[Number(codigoNum.charAt(i))];}
}
dib=dib + «3010105»;
//01010 central. agregamos 3 como digito identificador y 5 al final, para poder representar por css como clase diferente
for(var i=7;i<13;i++){dib = dib + EAN_der[Number(codigoNum.charAt(i))];}
dib = dib + «41015»; //fin
}
else //EAN8
{
var dib=»21015″; //inicio
for(var i=0;i<4;i++){dib= dib + EAN_izq1[Number(codigoNum.charAt(i))];}
dib=dib + «3010105»; //centro
for(var i=4;i<8;i++){dib = dib + EAN_der[Number(codigoNum.charAt(i))];}
dib = dib + «41015»; //fin
}
pintaCB(dib,codigoNum);
}

——— CSS ——————————————————————————
.codigoBarras{position: relative; display: block; float: left; width: 200px; height: 100px; border: 1px solid #000; margin: 0; padding: 0;}

.cb0, .cb1{float: left; width: 1px; border: none; height: 80px; padding: 0; margin:0;}

.cb1{background-color: #000;}
.cb0{background-color: #fff;}

.inicio, .medio, .fin{margin:0; padding:0; float: left; position: relative;}
.inicio{margin: 0 0 0 5px;}

.inicio .cb1,
.inicio .cb0,
.medio .cb1,
.medio .cb0,
.fin .cb1,
.fin .cb0
{height: 90px;}

.codigoBarras .digitos{display: block; position: absolute; left: 0; top: 80px; clear: both; margin:0; padding:0;}
——————————————————————————————

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Este sitio usa cookies con fines estadísticos (Ya sabes, Google Analytics... Nada importante). ¡Nada más! En cumplimiento de la RGPD puedes elegir si activarlas o no, así que ya sabes ;-)

Cookies