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í:
<!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.
Comenzando a definir vistas y controladores
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.
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:
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:
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:
<!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:
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:
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:
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:
<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.
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.
Últimos comentarios