Imprimir ticket en impresora térmica usando Javascript

Introducción

Actualización agosto 2019

¿Quieres imprimir con JavaScript sin usar el diálogo de impresión, con la posibilidad de cortar el papel y abrir el cajón de dinero? mira este post.

Recientemente escribí un tutorial sobre cómo imprimir un ticket en una impresora térmica usando PHP. Veamos entonces cómo podemos imprimir ticket en impresora térmica usando JavaScript.

Las complicaciones que tenemos al imprimir con PHP son:

  • Confusión de cómo usar la librería
  • Forzar a que el lenguaje del servidor sea PHP

Así que ahora decidí hacer una entrada para saber cómo imprimir un ticket en una impresora térmica sin usar PHP, sólo Javascript. El resultado será el siguiente:

Resultado final al Imprimir ticket en impresora térmica usando Javascript

Resultado final al Imprimir ticket en impresora térmica usando Javascript

Cuando terminemos, la interfaz se verá como aparece abajo. Puedes probarlo directamente haciendo click en Imprimir dentro de este enlace.

Lo único laborioso de esto es diseñar el ticket y adjuntar los productos.

Nota: lo he probado solamente con Chrome. Pero, independientemente del lugar, debemos quitar todos los márgenes y modificar un poco la escala para que el contenido ocupe el mayor espacio posible. Por ejemplo, así se ve sin ningún margen:

Vista previa al Imprimir ticket en impresora térmica usando Javascript

Vista previa al Imprimir ticket en impresora térmica usando Javascript

Imprimir ticket en impresora térmica usando Javascript

Diseñando el ticket

Vamos a comenzar definiendo un contenedor:

Agregando una tabla

Vamos a tabular todo con una tabla, para que quede alineado:

 

Estilos

Ahora falta definir nuestros estilos:

Hay que notar que también definimos algunas clases para centrar texto y algunos estilos para una imagen.

Esto es porque le pondremos un logo más adelante. Por el momento nuestro ticket se ve así.

Logo y pie

Finalmente vamos a agregar un “Gracias por su compra” o algo que nosotros queramos, así como un logo.

Olvidé mencionar que tenemos que asignar las clases a las columnas y filas de las tablas, de la siguiente manera:

Ahora nuestro ticket luce mejor, y puedes verlo aquí.

Imprimiendo

Lo único que falta es agregar una forma de imprimirlo. Sólo tenemos que llamar a window.print desde JS. Si deseamos que se imprima instantáneamente, lo haremos así:

Imprimiendo al hacer click

Lo que recomiendo es que mejor pongamos un botón que lo imprima, porque si lo imprimimos al instante puede que no se hayan cargado las imágenes, o cosas así. De todos modos la elección queda en nosotros.

Vamos a agregar un botón:

Y en el CSS vamos a ocultarlo, para que no salga al imprimir. Ya hice una entrada sobre esto aquí, por lo que no lo explicaré.

Finalmente definimos la función en Javascript:

Nuestro trabajo final se ve así.

Si hacemos click en el botón podemos ver que se imprime. Ahora simplemente tenemos que elegir la impresora y mandarlo.

Nota: puedes ocultar algunos elementos al imprimir, ya sea con CSS o con JavaScript y CSS.

Conclusión

Con esto podemos imprimir tickets y no sólo en la impresora térmica, también en cualquier otro dispositivo. Lo único de lo que debemos asegurarnos es de que nuestra impresora esté instalada correctamente.

Para dibujar los productos podemos hacerlo a mano, o con un framework como Vue, jQuery o AngularJS. Yo lo hice con javascript puro para hacerlo simple.

Si el ticket no funciona o no sale bien, podemos cambiar los pixeles y cualquier otra cosa. De esta manera podemos imprimir ticket en impresora térmica usando JavaScript