Tabla impresa en impresora térmica

Imprimir tabla en impresora térmica

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.

Tabla impresa en impresora térmica
Tabla impresa en impresora térmica

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:

Instalar impresora térmica como genérica y compartirla

Descarga y ejecuta el plugin:

Plugin para impresoras térmicas versión 3

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:

Plugin para impresoras térmicas versión 3

Ya he importado el conector. Ahora solo queda usarlo y enviarlo a mi impresora:

Y con eso obtenemos el siguiente resultado:

Tabla impresa en impresora térmica
Tabla impresa en impresora térmica

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:

Imprimir corte de caja en software gratis para restaurante
Imprimir corte de caja en software gratis para restaurante

También sirve para un ticket con los platillos solicitados:

Ticket con detalle de pedido impreso con impresora térmica usando programa para administrar un restaurante
Ticket con detalle de pedido impreso con impresora térmica usando programa para administrar un restaurante

Y por aquí tengo una versión preliminar de cuando apenas estaba diseñando ese sistema:

Datos formateados como tabla en ticket en impresora térmica
Datos formateados como tabla en ticket en impresora térmica

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.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *