Blog de conocimiento gratuito: linux, programación, open source, bases de datos, android, frameworks, web e informática en general.
El título es totalmente correcto: en este post te enseñaré 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.
El plugin presentado aquí permite imprimir texto, texto con acentos, imágenes, códigos de barras y QR, cambiar la alineación, tamaño de fuente, imprimir imágenes, cortar el papel, abrir el cajón y muchas cosas más.
Si quieres imprimir un ticket en una impresora térmica desde JavaScript y la impresora térmica está conectada por USB entonces mira el siguiente post:
https://parzibyte.me/blog/2022/09/30/comunicar-javascript-impresora-termica-usando-plugin-v3/
Eso te servirá para imprimir desde cualquiera de las 3 plataformas que mencioné anteriormente, además de que podrás usar varios lenguajes aparte de JavaScript (como Python, Java y cualquier otro que hable HTTP).
Si por el contrario tú tienes una impresora térmica pero conectada por Bluetooth entonces mira el plugin para Android, desde el cual podrás imprimir usando JavaScript y Java:
https://parzibyte.me/blog/2022/11/01/plugin-gratuito-impresoras-termicas-bluetooth-android/
Como se haria en flutterWeb?
Sería cuestión de invocar al plugin que escucha en localhost, ya sea para móviles o escritorio
Hola buenos días estoy trabajando con la v1 y no encuentre el conector.exe de esta version para descargar podrias volverlo a subir. probe con la v3 y no me anda
Buenos días. El conector v3 y plugin v3 son los únicos disponibles por el momento.
Saludos
Buenas tardes no puedo hacer jalar que me muestre las impresoras. Ya trabajaba con la versión 2 y todo muy bien. El error está aquí:
if (ruta) ConectorPlugin.URL_PLUGIN_POR_DEFECTO = ruta;
const response = await fetch(ConectorPlugin.URL_PLUGIN_POR_DEFECTO + “/impresoras”)
La ruta es de donde está instalado el plugin? No corre desde el lado del usuario como la versión 2?
Buenas tardes. Si trabajaba con la versión 2, ¿por qué comenta el post de la versión 1?
Por otro lado, la versión 2 ya solo está pero como código fuente. Le recomiendo probar la versión 3 que sigue siendo gratuita y permite más cosas que la versión del post actual: https://parzibyte.me/blog/2022/09/30/comunicar-javascript-impresora-termica-usando-plugin-v3/
Me gustaría me dieras el precio de la licencia de tu plunig por un año
Hola. Solo hay que multiplicar 12 * el costo de la licencia por mes.
Saludos!
Es una lastima, intento imprimir desde una aplicacion hta, y aunque con java puro la impresion funciona bien en los navegadores, en hta no funciona bien, me ilusiono esta solucion, porque la versión 1 tiene ejemplos sobre ie-11 que es posible que funcionen en hta, pero ni la version 1 ni la version 2 funcionan para mi impresora en htlm, parece que imprime y no da error, pero al rato de espera sin obtener ningun caracter escrito dan error de comunicación en el driver de la impresora. La impresora no es de tiquets, es de etiquetas con papel continuo. Brother QL-700
El plugin (como el título lo dice) es para impresoras térmicas, no de etiquetas.
Saludos!
Buenas, al comprar el premium que ventajas tengo? y por donde puedo hacer la compra?
Muchas gracias.
Encontrará toda la información en https://parzibyte.github.io/plugin-ticket-js
Saludos!
Hola. Sigo probando tu plugin y necesitaria abrir el cajón de monedas. (tengo uno para probarlo).
¿podrias por favor dejarme un código de ejemplo, para probar?
Probe con impresora.pulse();, pero pulse no aparece como function
Hola. Puede invocar al método cash: https://github.com/parzibyte/plugin-ticket-js/blob/master/Impresora.js#L86
Saludos 🙂
Estimado.
Tu código esta muy genial y lo he estado probando con la impresora térmica EPSON, pero lo que no he podido lograr es poder enviar el comando de corte, tu has podido realizar el corte con estas impresoras?.
Agradeceria enormemente tu ayuda.
Hola. No cuento con ese modelo de impresora así que no podría decirle.
Saludos 🙂
Hola. Estoy practicando con tu plugin, con el software que adjuntas, puedo hacer pruebas correstas, pero en el apartado “Imprimir indicando nombre de la impresora”, no me imprime y consola me saca estos errores. ¿ como se solucionan?
-Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en http://localhost:8000/imprimir_en (razón: falta la cabecera CORS ‘Access-Control-Allow-Origin’).
-Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
Hola. Tengo un par de dudas:
1-Es compatible el plugin con una impresora wifi? o solo funciona con impresoras conectadas por cable?
2-Si compro la version premium, es posible que me liberes el source code completo del plugin?
3-Quiero usar varias impresoras, todas de la misma marca y modelo, funcionaria el plugin con todas o solo con la que esta como predeterminada?
Hola. A continuación respondo sus dudas:
1- Solo por cable
2- No, no es posible
3- La librería ofrece el método “imprimirEnImpresora” por lo que usted podría imprimir en cualquier impresora especificando el nombre, siempre y cuando la impresora funcione correctamente
Saludos 🙂
Hola, hay posibilidad de crear solo los estilos para utilizarlos en Web Apps o aplicaciones desde un celular con impresoras térmicas portátiles?
Por ejemplo para una app sencilla realizada en React y que debe imprimir desde el celular.
La conexión de la impresora portátil se realiza por bluetooth con la mayoría de aplicaciones que hay en la app store y los celulares la reconocen sin problemas, pueden imprimir cualquier cosa, incluso un pdf o cualquier web (aunque se ve muy pequeño).
El inconveniente es el formato final, como se podrían crear estilos para dar formato a la impresión de una factura creada en la pagina web?
Gracias y saludos.
Hola. Para esos casos, el plugin no le serviría, pues solo se puede ejecutar en Windows. Podría funcionar llamando a la API en la PC en donde el plugin se ejecuta, a través de la LAN. O puede, como alternativa, imprimir el ticket con HTML y JavaScript puro: https://parzibyte.me/blog/2018/01/22/imprimir-contenido-div-html-javascript/
Saludos cordiales 🙂
Hola. Estoy haciendo unas primeras pruebas con tu código en un servidor, más el plugin (demo) en el pc local con una impresora normal A4. Y funciona corretamente con tu ejemplo:
let impresora = new Impresora();
impresora.write(“Hola mundo \nParzibyte.me”);
impresora.end()
.then(valor => {
loguear(“Al imprimir: ” + valor);
});
Pero quiero enviar a imprimir mi elaborado ticket de, por ejemplo, 40 lineas , y se me ocurrio meter todo el texto en un string y este a una variable ($miticket contiene todo el texto del tiquet como lo puedo mandar a pantalla con y demás etiquetas html)
var texto = ”;
let impresora = new Impresora();
impresora.write(texto);
impresora.end()
.then(valor => {
loguear(“Al imprimir: ” + valor);
});
El problema es que el resultado impreso es que solo representa la primea linea del ticket literialmente en código html
Hola. El plugin no soporta HTML, o mejor dicho, los comandos ESC POS no soportan HTML, solo texto plano.
Saludos 🙂
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.
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);
});
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
Gracias por sus comentarios. Yo también llevaba años buscándola hasta que decidí crearla y compartirla
Saludos 🙂
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?
Hola, sí, es necesario; igualmente podrías ejecutar el programa de manera silenciosa (no lo he probado pero aquí hay algo de información https://superuser.com/questions/191149/how-to-execute-cmd-exe-silently)
Sobre el costo, envíame un mensaje a través de una de mis redes sociales, desde mi página de contacto o en el formulario que hay en https://parzibyte.me
Saludos
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
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
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
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/
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.
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
Perfecto! Me ha funcionado ya!
Esta librería tiene soporte para imprimir códigos de barras?
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í
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!
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.
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