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.

Relacionado:  Tutorial de Django: bases de datos, migraciones y modelos

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.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 623 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

17 Comments

Enrique · mayo 25, 2020 a las 12:24 am

Ante todo, felicidades por el plugin, Luis. Es tremendamente útil. Querría comprar la versión premium para un proyecto actual y futuros pero me encuentro con un error algo peculiar.
En primer lugar he seguido cuidadosamente las instrucciones, el plugin está en segundo plano y tengo la impresora de tickets compartida y configurada como predeterminada, pero cuando ejecuto el plugin de prueba no imprime nada. A modo de pista, te comento que desde el ejemplo de “demostración de las capacidades del plugin” detecta la lista de impresoras, y sí imprime pero… ¡No imprime con un click desde imprimir! (Ahí sale: Al imprimir: Error en el servidor: ) Sin embargo imprime el ticket de prueba directamente al clickear sobre “Establecer como predeterminada”. Es como si a pesar de lo que dijese el sistema operativo (Windows 7 Prof.) la impresora no estuviese predeterminada para el plugin. Ojalá pudieras dar algo de luz a esto y de nuevo, felicidades por tu trabajo. Un saludo.

    Enrique · mayo 25, 2020 a las 12:47 am

    Después de escribir el mensaje anterior descubrí que había una nueva versión del plugin. Ahora sí imprime correctamente desde el botón de imprimir, pero sigue sin imprimir desde el ejemplo (Impresora.js está en el raíz).

    let impresora = new Impresora();
    impresora.write(“Hola mundo\nParzibyte.me”);
    impresora.end()
    .then(valor => {
    loguear(“Al imprimir: ” + valor);
    });

kevim herrera martinez · enero 14, 2020 a las 1:23 pm

Hola que tal llevo creo años buscando esta solucion para mis sistemas web para los clientes que me piden sistemas online y uso de tickeras automaticas anteriormente solo podia hacer creando previamente un doc pdf y mandando a imprimir esta es la mejor manera comprare el premium en un par de semanas gracias por tu gran aporte

    parzibyte · enero 14, 2020 a las 1:47 pm

    Gracias por sus comentarios. Yo también llevaba años buscándola hasta que decidí crearla y compartirla
    Saludos 🙂

Carlos · septiembre 21, 2019 a las 5:19 pm

Hola, es absolutamente necesario tener el plugin en ejecucion y con la ventana del CMD abierta? y lo otro… cual es el valor de la version premium del pluguin?

Pablo Carrion · septiembre 1, 2019 a las 9:21 pm

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

    parzibyte · septiembre 1, 2019 a las 9:27 pm

    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

    Juan Pablo · septiembre 1, 2019 a las 11:55 pm

    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

    parzibyte · septiembre 2, 2019 a las 9:47 am

    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/

Matias · agosto 26, 2019 a las 7:53 am

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.

    parzibyte · agosto 26, 2019 a las 11:50 am

    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

Aaron · agosto 8, 2019 a las 11:28 am

Perfecto! Me ha funcionado ya!
Esta librería tiene soporte para imprimir códigos de barras?

    parzibyte · agosto 8, 2019 a las 11:35 am

    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í

    Aaron · agosto 9, 2019 a las 2:09 am

    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!

Aaron · agosto 8, 2019 a las 10:55 am

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.

    parzibyte · agosto 8, 2019 a las 10:59 am

    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 *

A %d blogueros les gusta esto: