Conectar Angular con impresora térmica – Imprimir tickets
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.
Impresora térmica con Angular y TypeScript – Ticket impreso
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
Interfaz web con Angular para imprimir recibo en POS printer
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í:
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.
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:
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:
https://parzibyte.me/blog/2017/12/11/instalar-impresora-termica-generica/
Si usas Linux o Raspbian:
https://parzibyte.me/blog/2021/07/22/instalar-impresora-termica-linux-imprimir/
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:
https://parzibyte.me/blog/2022/09/30/plugin-impresoras-termicas-version-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
- Configura tu impresora y compártela
- Descarga el plugin y asegúrate de que se está ejecutando en segundo plano
- 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/
Buen video, tengo una duda, como seria en el caso de android?
es decir si tengo el proyecto usando mi movil android, para la impresion como seria el procedimiento?
Usar esto: https://parzibyte.me/blog/2022/09/30/comunicar-javascript-impresora-termica-usando-plugin-v3/
Muchas gracias por los tutoriales sobre las impresoras. Estoy teniendo el siguiente error al darle al botón de imprimir:
“Error: Error en el servidor: open \\xxxxxx\ZDesigner ZQ520 (ZPL): The network name cannot be found.”
La impresora no existe, no está compartida o no sigue los parámetros del nombre. Por favor vuelva a leer: https://parzibyte.me/blog/2017/12/11/instalar-impresora-termica-generica/
¿Es necesario compartirla? Ya la instalé como genérica como indicas e imprimí la pagina de pruebas. Y me aparece en la lista de impresora de la aplicación, pero me sigue saliendo el mismo mensaje. Muchas gracias de nuevo por estos tutoriales.
Sí, es necesario compartirla como se indica en el tutorial que cité anteriormente. Por otro lado, veo que su impresora se llama
ZDesigner ZQ520 (ZPL)
Citando el tutorial que le recomendé que lea de nuevo, dice: