El día de hoy vamos a ver cómo imprimir tickets, recibos o facturas en una impresora térmica desde Angular usando el lenguaje de programación TypeScript y el lenguaje ESC POS para la impresora.

Básicamente vamos a ver cómo comunicar Angular con una thermal printer, pos printer o impresora POS (Epson, Xprinter, etcétera) e imprimir texto, darle formato, imprimir códigos QR, códigos de barras, imágenes, acentos y varias cosas que permitirán crear tickets desde Angular.

Vamos a usar un plugin gratuito y un conector en TypeScript que acabo de crear. Por cierto, el plugin también nos permitirá cortar el papel, abrir el cajón de dinero, definir caracteres personalizados e imprimir en red.

Nota: esto funciona en Windows, Linux, Raspberry Pi y con otro plugin podría incluso funcionar en Android con impresoras Bluetooth.

Imprimir ticket en impresora térmica desde Angular

Necesitamos importar el conector programado con TypeScript. Te lo dejo en GitHub: https://github.com/parzibyte/thermal-printer-angular/blob/master/src/app/ConectorPluginV3.ts

En mi caso lo he colocado en el mismo directorio que mi app.component.ts ya que solo estoy probando. Obviamente tú puedes colocarlo en cualquier otro lugar. Lo importé así:

import ConectorPluginV3 from "./ConectorPluginV3";

Ahora creamos una instancia de ConectorPluginV3 e invocamos a cualquier operación para escribir texto, imprimir imágenes, etcétera.

Eres libre de ver el código fuente del conector y la documentación para ver todas las operaciones disponibles.

Documentación Plugin ESC POS Desktop

En mi caso lo hice como se ve a continuación para generar un recibo como el que se ve en el encabezado del post:

async probarImpresion() {
  if (!this.impresoraSeleccionada) {
    return alert("Seleccione una impresora");
  }

  if (!this.mensaje) {
    return alert("Escribe un mensaje");
  }
  const conector = new ConectorPluginV3();
  conector
    .Iniciar()
    .EstablecerAlineacion(ConectorPluginV3.ALINEACION_CENTRO)
    .EscribirTexto("Hola Angular desde parzibyte.me")
    .Feed(1)
    .EscribirTexto(this.mensaje)
    .Feed(1)
    .DescargarImagenDeInternetEImprimir("https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png", ConectorPluginV3.TAMAÑO_IMAGEN_NORMAL, 400)
    .Iniciar()
    .Feed(1);
  const respuesta = await conector.imprimirEn(this.impresoraSeleccionada);
  if (respuesta == true) {
    console.log("Impresión correcta");
  } else {
    console.log("Error: " + respuesta);
  }
}

Fíjate que al final invoco a imprimirEn y le paso al conector el nombre de mi impresora que es tomado de un input.

Si la respuesta es true es que todo fue correcto, y si no, la propia respuesta tendrá el mensaje de error como string.

Y así de fácil es imprimir en una impresora térmica desde Angular con TypeScript. Ahora veamos las dependencias y requisitos.

Vídeo de ayuda

He grabado un vídeo para explicar el funcionamiento del plugin para imprimir en impresora térmica con Angular. Es un complemento de este post:

Configurando impresora

Antes de poder imprimir tickets en la impresora POS tienes que instalar sus controladores ya sea genéricos o de fábrica y luego compartirla. Ya tengo un post detallado:

Instalar impresora térmica como genérica y compartirla

Si usas Linux o Raspbian:

Plugin para impresoras térmicas versión 3

Asegúrate de que la impresora funciona e imprime una página de prueba. No olvides seguir los pasos detalladamente.

Descargando plugin

El siguiente paso es descargar el plugin, mismo que es gratis sin ningún engaño. Mira la página de presentación y por favor lee todo lo que sea necesario para ejecutarlo:

Plugin para impresoras térmicas versión 3

Asegúrate de que se está ejecutando y tiene todos los permisos necesarios. Luego ya puedes probar el ejemplo con Angular y TypeScript que dejé anteriormente.

En resumen

1. Configura tu impresora y compártela
2. Descarga el plugin y asegúrate de que se está ejecutando en segundo plano
3. Importa el conector de TypeScript, crea una instancia, invoca a los métodos para personalizar tu recibo y luego invoca a imprimirEn.

Nota: también puedes obtener la lista de impresoras invocando a obtenerImpresoras del plugin. En el código completo que dejaré más abajo te dejaré un ejemplo.

Próximos pasos

Ahora que has conectado una impresora térmica con tus apps de Angular puedes hacer más como imprimir códigos de barras, imágenes, códigos QR, imprimir acentos y varias cosas con una impresora térmica sin importar el sistema operativo.

Recomiendo probar los ejemplos que están programados con JavaScript pero que igualmente puedes usar con TypeScript.

También recuerda que puedes crear tu propio conector en cualquier otro lenguaje de programación, y que, aunque todavía no escribo el post para Angular, existe un plugin para impresoras térmicas en Android con Bluetooth.

El código completo del ejemplo te lo dejo en GitHub. Eres libre de explorarlo: https://github.com/parzibyte/thermal-printer-angular/