Inicio Apuntes FPApuntes DAWCódigos de barras, crea los tuyos con un poco de PHP y JS

Códigos de barras, crea los tuyos con un poco de PHP y JS

Publicado por entreunosyceros

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Una vez más aquí. Con el año nuevo voy a publicar aquí un pequeño artículo que un usuari@ me pidió hace ya unas semanas. Tengo que decirle a esta persona, que me olvidé. Pero bueno, supongo que más vale tarde que nuca. El caso es que esta persona me decía que necesitaba poder crear sus propios códigos de barras (para vete tú a saber qué), y que quería un programa sencillo con el que crearlos.

Bueno, pues con un poco de JavaScript y PHP, se puede crear un sencillo sistema con el que crear tus propios códigos de barras. Este sistema de creación, va a permitir imprimir o descargar como una imagen .png el código que se cree. Además podremos utilizar cinco tipos de códigos de barras.

Para crear este sencillo ejemplo, será necesario importar a nuestro proyecto bootstrap.min.js, html2canvas.js y jquery.min.js. También necesitaremos bootstrap.min.css y otra hoja de estilos con la que dar el aspecto que queramos a este proyecto.

Generador básico de códigos de barras

Además de los archivos que vamos a necesitar importar, este proyecto se basa en tan solo dos archivo .php. El primero de ellos será el index.php, en el que crearemos las cajas en las que añadiremos los datos de nuestro código de barras, además de la etiqueta de turno.

generador de código de barras

En este archivo index, también añadiremos un poco de JS para tratar los datos. Dentro de este archivo veremos un código como el siguiente:

<!DOCTYPE html>
<html lang="es">

<head>
  <title>Generador de Código de Barras</title>
  <meta charset="utf-8" />
  <meta http-equiv="content-language" content="es">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <link rel="stylesheet" href="./css/style.css" />
  <link rel="icon" type="image/jpg" href="./img/favicon.ico"/>
</head>

<body class="alert-info">

  <div class="container-fluid">
    <div class="col-md-12">
      <div class="row">
        <div class="card-body text-center">
          <h4>Generador de Código de Barras</h4>
        </div>
      </div>
      <div class="row">
        <div class="card col-md-6 mt-5 mr-5">
          <div class="card-body">
            <div class="form-group">
              <label for="" class="control-label ">Código</label>
              <input type="text" id="code" class="form-control">
            </div>
            <div class="form-group">
              <label for="" class="control-label">Etiqueta</label>
              <input type="text" id="label" class="form-control">
            </div>
            <div class="form-group">
              <label for="" class="control-label">Tipo de Código de Barras</label>
              <select class="browser-default custom-select" id="type">
                <option value="C39">Code 39</option>
                <option value="C93">Code 93</option>
                <option value="C128">Code 128</option>
                <option value="C128A">Code 128 A</option>
                <option value="C128B">Code 128 B</option>
              </select>
            </div>
            <button type="button" class="col-md-2 btn-block float-right btn btn-primary btn-sm" id="generate">Generar</button>
          </div>
        </div>
        <div class=" card col-md-5 ml-5 mt-5" id='bcode-card'>
          <div class="card-body">
            <div id="display">
              <center>Código de Barras</center>
            </div>

          </div>
          <div class="card-footer" style="display:none">
            <center>
              <button type="button" class="btn-block btn btn-primary btn-sm" id="save">Descargar</button>
              <button type="button" class="btn-block btn btn-success btn-sm" id="print">Imprimir</button>
            </center>

          </div>
        </div>

      </div>
    </div>

  </div>

</body>

</html>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/html2canvas.js"></script><!--Script para descargar el código de barras-->
<script>
  $('#generate').on('click', function() {
    if ($('#code').val() != '') {
      $.ajax({
        url: 'barcode.php',
        method: "POST",
        data: {
          code: $('#code').val(),
          type: $('#type').val(),
          label: $('#label').val()
        },
        error: err => {
          console.log(err)
        },
        success: function(resp) {
          $('#display').html(resp)
          $('#bcode-card .card-footer').show('slideUp')
        }
      })
    }
  })

  $('#save').click(function() {
    html2canvas($('#field'), {
      onrendered: function(canvas) {
        var img = canvas.toDataURL("image/png"); /* Tipo de imagen a generar */

        var uri = img.replace(/^data:image\/[^;]/, 'data:application/octet-stream');

        var link = document.createElement('a');
        if (typeof link.download === 'string') {
          document.body.appendChild(link);
          link.download = 'codigoBarras_' + $('#code').val() + '.png'; /* Nombre del archivo a descargar */
          link.href = uri;
          link.click();
          document.body.removeChild(link);
        } else {
          location.replace(uri);
        }

      }
    });
  })
  $('#print').click(function() {
    var openWindow = window.open("", "", "_blank");
    openWindow.document.write($('#display').parent().html());
    openWindow.document.write('<style>' + $('style').html() + '</style>');
    openWindow.document.close();
    openWindow.focus();
    openWindow.print();
    setTimeout(function() {
      openWindow.close();
    }, 100)
  })
</script>

Toda la información que se toma del archivo index, se va a tratar desde el archivo barcode.php. Con el que vamos a generar la imagen del código de barras.

<?php
require 'vendor/autoload.php';
extract($_POST);

$generator = new Picqer\Barcode\BarcodeGeneratorPNG();
$codes ='';

foreach(str_split($code) as $key => $i){
	$codes .=$i;
	if(count(str_split($code)) != $key)
	$codes .=' ';

}
?>

<div id="field">
<center><large><b><?php echo $label ?></b></large></center>
<img src="data:image/png;base64,<?php echo base64_encode($generator->getBarcode($code, $type)) ?>" alt="<?php echo $label?>" />
<div id="code"><?php echo $codes ?></div>
</div>

Para ver funcionando este ejemplo, antes de proceder a su descarga, se puede ver en la sección de ejemplos de esta página.

Y bueno, con esto ya tendremos funcionando nuestro propio generador de códigos de barras. Para que todo funcione correctamente, a quién le interese puede descargar todos los archivos de este proyecto en el siguiente enlace.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.