angularjs

Códigos de barras con AngularJS

A veces es necesario generar códigos de barras o códigos qr con javascript o angularjs. En este caso mostraré cómo podemos hacerlo de una forma realmente rápida y fácil usando este poderoso framework.

Incluyendo lo necesario

Necesitaremos únicamente incluir a angularjs (obviamente) y una librería llamada angular-barcode que podemos encontrar en GitHub.

Nuestro encabezado lucirá algo así:

See the gist on github.

Ahora vamos a empezar a crear nuestro script para la app, y crear un pequeño controlador.

Comenzando a definir vistas y controladores

En nuestro script escribiremos lo siguiente:

See the gist on github.

Como ya declaramos nuestra app en javascript, ahora vamos a ponerlo en HTML para que Angular se encargue de pegar la vista y el controlador. Así que en nuestra vista vamos a declarar la app y el controlador como se ve en el código:

See the gist on github.

Ahora sí vamos a empezar a declarar nuestro código de barras. Simplemente tenemos que poner la etiqueta <angular-barcode> con algunas opciones. Entonces nuestra vista quedaría así:

See the gist on github.

Como podemos ver, estamos definiendo los atributos bc-options, bc-type y el modelo. Vamos a analizar estos 3.

bc-options

Se encarga de declarar el tamaño, el color, y muchas propiedades del código de barras. Debemos definirlo en nuestro controlador.

bc-type

Puede ser svg, canvas o img. El código de barras puede ser pintado como una imagen, como un elemento svg o en canvas. Yo recomiendo usar svg porque permite una resolución bastante buena; sobre todo si vamos a imprimir.

Modelo o ng-model

Es el modelo de angularjs. Es el valor que tendrá nuestro código de barras.

 

Definiendo propiedades en controlador

Ya declaramos nuestras propiedades para que se reflejen en las vistas, ahora falta definir las opciones en nuestro controlador. Vamos a definir el modelo y las opciones:

See the gist on github.

Las opciones las he tomado directamente del ejemplo de la librería, podemos verlo aquí para obtener una idea de todo lo que podemos lograr. Con lo explicado arriba, el resultado que se obtuvo es el siguiente:

Haciendo que el código de barras cambie al escribir

Ya pusimos nuestro código de barras, pero es estático. Podemos hacer que sea dinámico y que conforme introduzcamos texto, cambie. Simplemente tenemos que agregar un input y ligarlo al modelo. Sólo tenemos que agregar el siguiente código:

See the gist on github.

Agregando el input, conseguimos cambiar de forma dinámica al código de barras generado. Así se ve ahora:

ng-if, ng-repeat…

Como es una directiva de angularjs, podemos usar ng-if, ng-show, ng-repeat y cualquier otra cosa. Vamos a hacer que se pueda ocultar y mostrar, y también a hacer que se repita dependiendo de un arreglo.

Para ello, en lugar de definir una variable de tipo string, usaremos un arreglo. Por lo que nuestro script cambiará a esto:

See the gist on github.

Ahora usaremos ng-repeat en nuestra vista:

See the gist on github.

Con lo que tendremos algo así:

Ahora vamos a agregar un checkbox para ocultar o mostrarlos. Simplemente hay que modificar a nuestra vista con el siguiente código:

See the gist on github.

El resultado ahora es el siguiente:

Imprimiendo códigos

Claro que podemos imprimir en javascript y angularjs, simplemente hay que llamar a window.print. Vamos a agregar un botón para imprimir nuestros códigos:

See the gist on github.

En nuestro controlador vamos a crear la función imprimir:

See the gist on github.

Ahora podemos probarlo:

Nota: si deseamos ocultar el botón al imprimir, recomiendo leer este post para ocultar elementos al imprimir usando CSS.

Conclusión

Así es como podemos generar códigos de barras.

Hay muchas opciones que tal vez ponga en otro post. Por el momento sólo nos dedicamos a crearlos y a usar la magia del framework, pero falta ver cómo cambiar colores, tamaño, etcétera. Recomiendo ver el proyecto en GitHub, y visitar el ejemplo en donde nos muestran las opciones.

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.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

  • Hola amigo, me gustaria saber como hacer que un scanner externo "escanee" lo que es un codigo e tipo PDF 417 actualmente uso Angular 8 TypeScript y JavaScript¡

    eh tomado algunos ejemplos de scanner pero llama la camara y no eh podido hacer que llame el escaner

    • Hola. Te refieres a leer un código de barras con la cámara del dispositivo, o leer un código a partir de una imagen? no te he entendido bien, pero claro que te puedo ayudar

  • Hola, necesito la parte de como leer los codigos de barras... podrias hacer un tutorial sobre eso. gracias. actualmente estoy usuando nodejs y angular 6

    • Hola. Tu pregunta es ambigua, ¿leerlos en qué modo, directamente de la cámara, a través de un archivo, en un input, o cómo? No he trabajado con Angular 6, pero sí con Node.

Entradas recientes

JavaScript (lado del cliente): leer pixeles de imagen

En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…

5 días hace

PHP y JavaScript: llenar select con AJAX

Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…

5 días hace

Imprimir PDF generado con HTML

Hoy vamos a ver programar la impresión de un PDF generado a partir de HTML…

7 días hace

JavaScript: llenar select con arreglo

En este tutorial básico de JavaScript con HTML vamos a ver cómo llenar una lista…

2 semanas hace

Imprimir PDF a partir de URL

En este artículo se presenta una guía para imprimir un PDF a partir de una…

2 semanas hace

Imprimir PDF a partir de base64

En este post voy a enseñarte cómo imprimir un PDF a partir de su representación…

2 semanas hace

Esta web usa cookies.