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.
Necesitaremos únicamente incluir a angularjs (obviamente) y una librería llamada angular-barcode que podemos encontrar en GitHub.
Nuestro encabezado lucirá algo así:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
Ahora vamos a empezar a crear nuestro script para la app, y crear un pequeño controlador.
En nuestro script escribiremos lo siguiente:
angular
.module("CodigosDeBarras", ["angular-barcode"])
.controller("ControladorPrincipal", ["$scope", function($scope) {
}]);
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:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="CodigosDeBarras">
<div ng-controller="ControladorPrincipal">
</div>
</body>
</html>
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í:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="CodigosDeBarras">
<div ng-controller="ControladorPrincipal">
<angular-barcode ng-model="codigoBarras" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>
</div>
</body>
</html>
Como podemos ver, estamos definiendo los atributos bc-options, bc-type y el modelo. Vamos a analizar estos 3.
Se encarga de declarar el tamaño, el color, y muchas propiedades del código de barras. Debemos definirlo en nuestro controlador.
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.
Es el modelo de angularjs. Es el valor que tendrá nuestro código de barras.
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:
angular
.module("CodigosDeBarras", ["angular-barcode"])
.controller("ControladorPrincipal", ["$scope", function($scope) {
$scope.opciones = {
format: 'CODE128',
lineColor: '#000000',
width: 2,
height: 100,
displayValue: true,
fontOptions: '',
font: 'monospace',
textAlign: 'center',
textPosition: 'bottom',
textMargin: 2,
fontSize: 20,
background: '#ffffff',
margin: 0,
marginTop: undefined,
marginBottom: undefined,
marginLeft: undefined,
marginRight: undefined,
valid: function(valid) {}
};
$scope.codigoBarras = "parzibyte.me";
}]);
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:
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:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/isonet/angular-barcode/master/dist/angular-barcode.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="CodigosDeBarras">
<div ng-controller="ControladorPrincipal">
<input type="text" ng-model="codigoBarras">
<br>
<angular-barcode ng-model="codigoBarras" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>
</div>
</body>
</html>
Agregando el input, conseguimos cambiar de forma dinámica al código de barras generado. Así se ve ahora:
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:
angular
.module("CodigosDeBarras", ["angular-barcode"])
.controller("ControladorPrincipal", ["$scope", function($scope) {
$scope.opciones = {
format: 'CODE128',
lineColor: '#000000',
width: 2,
height: 100,
displayValue: true,
fontOptions: '',
font: 'monospace',
textAlign: 'center',
textPosition: 'bottom',
textMargin: 2,
fontSize: 20,
background: '#ffffff',
margin: 0,
marginTop: undefined,
marginBottom: undefined,
marginLeft: undefined,
marginRight: undefined,
valid: function(valid) {}
};
$scope.codigos = ["hola", "mundo", "somos", "palabras"];
}]);
Ahora usaremos ng-repeat
en nuestra vista:
<angular-barcode ng-repeat="codigo in codigos" ng-model="codigo" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>
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:
<label for="mostrarCodigos">¿Mostrar?
<input type="checkbox" ng-model="mostrarCodigos" />
</label>
<br>
<angular-barcode ng-show="mostrarCodigos" ng-repeat="codigo in codigos" ng-model="codigo" bc-options="opciones" bc-class="barcode" bc-type="svg"></angular-barcode>
El resultado ahora es el siguiente:
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:
<button type="button" ng-click="imprimir()">Imprimir</button>
En nuestro controlador vamos a crear la función imprimir:
$scope.imprimir = function(){
window.print();
};
Ahora podemos probarlo:
Nota: si deseamos ocultar el botón al imprimir, recomiendo leer este post para ocultar elementos al imprimir usando CSS.
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.
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.
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.