Las impresoras térmicas permiten la impresión de texto y la alineación del mismo, pero ¿qué pasa cuando queremos imprimir una tabla que sea alineada correctamente en caso de que el texto sobrepase el ancho? para ello debemos implementar un algoritmo propio.
Por ello es que en este post te voy a enseñar a imprimir datos tabulados o básicamente imprimir una tabla bien alineada y con separadores en una impresora térmica, usando únicamente texto.
Verás que podremos imprimir las celdas y columnas de la tabla respetando el máximo ancho del ticket, ya sea dibujando los separadores o solo ordenando los datos.
Demostración
Sugiero leer el post completo para ver lo que está pasando, pero si quieres probarlo justo ahora entonces instala tu impresora como genérica y compártela:
Descarga y ejecuta el plugin:
Para finalmente ir al siguiente ejemplo, elegir tu impresora e imprimir una tabla formateada:
https://parzibyte.github.io/ejemplos-javascript-plugin-v3/tabla.html
Datos de ejemplo
Por esta ocasión voy a imprimir una lista de productos con distintos valores y longitud para demostrar cómo se puede imprimir una tabla en una impresora térmica. Lo voy a hacer con JavaScript pero se puede hacer con cualquier lenguaje de programación.
Crear tabla usando solo texto
Ahora necesitamos un algoritmo que pueda tabular datos agregando las líneas en blanco que sean necesarias según la cantidad máxima de filas, coloque un separador de columnas, rellene las celdas cuando sea necesario y separe el texto en una nueva línea cuando sobrepase el ancho máximo.
Todo eso ya lo hice en 3 funciones que puedes ver con detalle en el siguiente enlace, te recomiendo leerlas para que sepas lo que estamos haciendo:
JavaScript: tabular datos con límite de longitud, separador y relleno
Entonces voy a importar esas 3 funciones:
Diseñar tabla para imprimir
Ahora que tenemos los datos de ejemplo y las funciones para crear una tabla de solo texto en JavaScript vamos a proceder a crear la tabla como una cadena para enviarla a una impresora térmica y así imprimir una tabla.
Vamos a necesitar una línea que separe cada fila. Yo la he diseñado con la siguiente función:
Eso me va a devolver algo como: -------------------+-----+-----+
Puede que ahora no tenga mucho sentido pero ya verás cómo se usa a continuación. Lo que sigue es crear el encabezado (vendría siendo el equivalente al thead en HTML) así:
Es importante que recuerdes que la función tabularDatos nos va a devolver los datos tabulados en varias líneas (específicamente hablando, devolverá un arreglo de tipo string).
Es responsabilidad del invocador recorrerlas y agregar el salto de línea. En la línea 2 comenzamos diseñando la tabla con un separador, y siempre agregamos un salto de línea al final.
Luego en la línea 14 recorremos las líneas del encabezado y las concatenamos a la tabla. Por ahora nuestra tabla se ve así:
Finalmente recorremos el arreglo de productos, tabulamos los datos con los valores y concatenamos en la tabla:
Ahora ya tenemos la tabla en una simple string y se ve así:
Ya podemos conectarnos con la impresora térmica y enviarle ese texto. El ticket va a respetar los espacios y saltos de línea, así que se va a imprimir tal y como está.
Nota: obviamente puedes cambiar el separador, el relleno y el ancho máximo de cada columna. También puedes tener columnas infinitas.
Imprimiendo tabla con impresora térmica
Lo que sigue es imprimir una tabla en una POS printer o thermal printer. Yo usaré mi plugin gratuito presentado en:
Ya he importado el conector. Ahora solo queda usarlo y enviarlo a mi impresora:
Y con eso obtenemos el siguiente resultado:
Obviamente puedes imprimir más cosas además de la tabla.
Poniendo todo junto
Puedes ver el código completo viendo el código fuente de la página de demostración o en GitHub: https://github.com/parzibyte/ejemplos-javascript-plugin-v3/blob/main/tabla.html
También tengo un vídeo de YouTube por si quieres revisarlo: https://www.youtube.com/watch?v=mTay-bViPjI
A continuación te enseño algunos ejemplos de cómo he usado este algoritmo para imprimir tickets en mi sistema para restaurantes. Primero vemos un reporte:
También sirve para un ticket con los platillos solicitados:
Y por aquí tengo una versión preliminar de cuando apenas estaba diseñando ese sistema:
Puedes hacer esto con cualquier lenguaje de programación, solo es cuestión de traducir el código a otro lenguaje, ya que el plugin funciona sin importar cuál de ellos utilices.
Por aquí te dejo más tutoriales con JavaScript y también más entradas sobre mi plugin para impresoras térmicas.
