Plugin para imprimir en impresora térmica usando navegador web y JavaScript

El título es totalmente correcto: en este post te mostraré a imprimir tickets, recibos o facturas en una impresora térmica usando JavaScript del lado del cliente incluso si tu página web o aplicación está en un servidor en la nube.

Como sabemos, imprimir un ticket con JavaScript es posible, pero difícil para el usuario final, pues tiene que seleccionar la impresora y confirmar la impresión.

Otra desventaja de imprimir con JavaScript sin plugin es que no podemos cortar el papel, abrir el cajón o cosas de esas.

Por eso es que he creado la solución al problema y vengo a exponerla. Y no, no es una broma ni un post engañoso.

English version here.

Un plugin para impresoras térmicas usando JavaScript

Por todo ello es que he decidido crear un plugin para imprimir con JavaScript, sin ninguna dependencia y usando JavaScript puro.

Si quieres saltar a los ejemplos o a la descarga del plugin, ve al repositorio de GitHub o a la documentación.

Lo que viene a continuación son detalles técnicos de cómo funciona el plugin.

Sordid details following…

Funcionamiento

El funcionamiento es sencillo. El plugin, que es un ejecutable, crea un servidor web en el puerto 8080 (que solo vive mientras el plugin está ejecutándose) y escucha peticiones.

El plugin, a diferencia de JavaScript, sí puede interactuar con la computadora del usuario, así que basta con que le digamos qué hacer a través de HTTP.

JavaScript es realmente bueno haciendo peticiones HTTP a través de, por ejemplo, fetch.

Esquema de funcionamiento de plugin para impresora térmica

En el esquema anterior se ilustra de mejor manera.

Gracias a que el plugin habla HTTP, se puede imprimir un ticket desde prácticamente cualquier lenguaje de programación que se pueda comunicar con el plugin.

La librería

No todos los tickets son iguales, y por ello es que debí crear una forma de hacer que el usuario pueda imprimir y modificar tickets infinitos.

Para ello, hice un arreglo en donde se ponen las acciones. Dentro del plugin simplemente las interpreto y las mando a la impresora.

Las acciones son un objeto que tiene “accion” (como write) y los datos, que son los datos usados para la acción.

Se ve mejor ilustrado en esta clase:

Ambas cosas, acción y datos, son convertidos a cadena.

Todas esas acciones se van agregando a un arreglo; a través de los métodos que expone la clase Impresora:

Esta clase simplemente trata de validar un poco los datos, pero al final, lo que se manda en el método end es un arreglo de objetos.

Del lado del servidor eso también se valida, y eso es todo.

Cosas que faltan

Falta minificar la librería, detectar bugs, etcétera.

Recuerda que esto es una explicación técnica, los ejemplos puedes verlos en la documentación.

13 pensamientos sobre “Plugin para imprimir en impresora térmica usando navegador web y JavaScript”

  1. Hola que tal, primero que nada gracias por compartir la librería, pero tengo los mismo problemas que Aaron, al seleccionar la impresora como predeterminada me imprime el ticket de configuración correcta, pero al darle en imprimir en ticket me da “Error en el servidor”, sin embargo la impresora esta ya configurada como predeterminada, Tal vez alguien me puede ayudar con alguna idea de lo que puede estar pasando, ya le cambie el nombre a POS y sigue igual

    1. Hola, te has asegurado de que tienes la última versión del plugin? en la última versión he agregado una descripción sobre el error, si me das el mensaje de error puedo ayudarte a solucionar el problema. También agradecería si muestras el código con el que estás intentando imprimir
      Por último, no olvides descargar la última versión de Impresora.js y de borrar caché
      Saludos

    2. La impresora que intento configurar es la EPSON TM20ii estoy utilizando el código de ejemplo de Github me lo descargue hoy, supongo que es la ultima versión, estaba pensando que tal vez podría ser porque tengo instalado XAMPP y se genere algún conflicto la verdad no se, pero cuando selecciono la impresora por defecto la impresora si imprime el ticket de prueba, sin embargo le doy en el botón de imprimir ticket y me da el error, aquí adjunto una captura del error https://www.tuweb.ec/error.PNG , espero me puedas ayudar y muchas gracias

    3. Para analizar el problema necesito:

      El puerto en el que se ejecuta XAMPP (si es el 8000 entonces ese es el problema, ya que el ticket escucha en el mismo)
      Una captura del plugin, es decir, de la consola que se abre
      Una captura de la pestaña network de la consola del navegador (para saber cómo se han hecho las peticiones, asegúrate de abrir la consola antes de ejecutar el código)
      El código que estás usando (no importa si lo acabas de descargar, solo quiero saber cuál es exactamente el código y las circunstancias en las que lo usas) colocado en gist.github.com
      Todas las capturas las puedes subir a imgur 😉

      También puedo conectarme de manera remota de manera opcional, solo debes ver la página de contrataciones: https://parzibyte.me/blog/contrataciones-ayuda/

  2. Hola, es una fantastica heramienta la que ha desarrollado, quiero comenzar por agradecerle por compartirla, me ha funcionado perfectamente. Queria hacerle dos consultas, ¿Es posible editar el encabezado y el pie del ticket? ¿Se puede agregar una imagen en el ticket?. Muchas Gracias, Saludos.

    1. Hola, gracias por tus comentarios 🙂
      1 – Claro que es posible editarlo o quitarlo, solo que se puede hacer en la versión “premium” del plugin
      2 – Por el momento, no. Pero si estás dispuesto a contratarme puedo desarrollar esa parte
      Estoy dispuesto a ayudarte con lo que necesites, dime tu problema en mi página de contacto si quieres: https://parzibyte.me/blog/contacto/
      Saludos

    1. Excelente, cuál fue la cosa que hiciste para que funcionara? (así ayudas a otros y a mí a solucionar los problemas más comunes)
      Sobre el código de barras: sí, sí tiene soporte, pero no se lo he agregado, pues mi impresora térmica (la que uso para probar) no imprime códigos de barras (es limitación de la impresora), pero una de más alta calidad tal vez sí

    2. En mi caso fue que me olvidé de compartir la impresora (La tengo conectada directamente al ordenador). Voy a intentar implementar el código de barras, a ver si lo consigo!

  3. Me parece muy útil, y quería hacer pruebas con una impresora EPSON TM-T88V RECEIPT que tengo por aquí dando vueltas. El problema es que al intentar ejecutar la prueba en la documentación recibo el siguiente mensaje:
    Al imprimir: Error en el servidor:
    Alguna idea? Tengo el servicio correctamente iniciado (la lista de impresoras sí que funciona), pero no consigo que me imprima nada.
    Estoy usando ambos ejemplos web, tanto el de las capacidades del plugin como el del ticket, y ninguno funciona.

    1. Hola. Has compartido la impresora y establecido esa impresora como la predeterminada? la demostración debe indicar cuál impresora estás usando, y si no muestra nada significa que no hay impresora predeterminada.
      Para establecer una predeterminada selecciónala de la lista y dale click en “establecer como predeterminada”, eso debería imprimir un ticket de prueba.
      Si sigue sin funcionar asegúrate de que la impresora imprime (imprimiendo una página de prueba desde el panel de control) y en el último caso ponle otro nombre, por ejemplo simplemente “POS” o algo así sin espacios
      Saludos

Deja un comentario

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