Angular: Generar códigos de barras

Descubre cómo generar un código de barras de manera sencilla para tus proyectos web con Angular. Este tutorial es perfecto para desarrolladores tanto novatos como más avanzados y te guiará a través de los pasos clave utilizando la potente librería JsBarcode.

Descubre el Poder de Angular para Crear Códigos de Barras en Minutos

Si eres un desarrollador web novato y estás buscando una manera fácil de darle un giro emocionante a tus proyectos, ¡has llegado al lugar correcto! En este artículo, te mostraré cómo utilizar Angular para generar códigos de barras de forma rápida y sencilla, (y que funcionan en 2023). Prepárate para sorprenderte.

Paso 1: Configura Tu Entorno de Desarrollo

Antes de sumergirte en la magia de los códigos de barras, asegúrate de tener todo lo necesario en tu entorno de desarrollo. Usaremos la potente librería de Node.js llamada “JsBarcode”. Para instalarla, simplemente ejecuta el siguiente comando:

Agregamos las dependencias usando el comando npm install

npm i jsbarcode
npm i xmldom
npm i @types/xmldom

En mi caso estas son las versiones que usé.

"jsbarcode": "^3.11.5",
"xmldom": "^0.6.0",
"@types/xmldom": "^0.1.32",

Paso 2: Define un SVG en el template

Definimos en el HTML nuestro componente SVG y utilizamos el atributo innerHTML para asignar el valor de una función personalizada que generará el código de barras:

<svg [innerHTML]="generateBarcode(product.itemName)"/>

Paso 3: Transforma Texto en Código de Barras

En el archivo TypeScript, implementamos la función generateBarcode(itemName: string) que convierte el texto en un deslumbrante código de barras en formato SVG.

El SVG es un formato basado en XML para representar gráficos vectoriales, por lo que tus imágenes en este formato nunca se distorsionarán. Como un tipo de documento XML validado nuestro documento debe de definir algo llamado namespace, con el valor http://www.w3.org/2000/svg, que es el lugar en la web donde está pública la especificación y reglas para este formato.

El código quedará de la siguiente manera:

generateBarcode(itemName: string) {
    const xmlSerializer = new XMLSerializer();
    const document = new DOMImplementation().createDocument('http://www.w3.org/1999/xhtml', 'html', null);
    const svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    JsBarcode(svgNode, itemName, {
      format: "CODE128",
      width: 1,
      height: 40,
      displayValue: false,
      xmlDocument: document,
      margin: 30,
      fontSize: 11
    });
    const svgText = xmlSerializer.serializeToString(svgNode);
    return this.sanitizer.bypassSecurityTrustHtml(svgText);
  }

Asegúrate de no olvidar los imports correspondientes

import JsBarcode from "jsbarcode";
import {DOMImplementation, XMLSerializer} from "xmldom";
import {DomSanitizer} from "@angular/platform-browser";

Algo que podrías haber notado es que estamos sanitizando el SVG, esto nos permite evitar ataques de tipo XSS, si deseas leer más al respecto puedes consultar la documentación oficial.