En este post te voy a enseñar a imprimir en una impresora térmica usando JavaScript del lado del cliente, evitando confirmación por parte del usuario, gracias a un plugin.
Y también he desarrollado un plugin para Android, míralo aquí:
Yo recomiendo la versión 3 y final, pero si quieres puedes ver las otras versiones igualmente.
¿Quieres ver el plugin en funcionamiento? he grabado el siguiente vídeo en donde se muestra cómo descargar el plugin, configurar la impresora, establecerla y usar los ejemplos.
También resuelvo algunas preguntas comunes. Por favor, míralo:
Veamos el código de JS para imprimir en una POS printer o thermal printer con JS.
Lo único que tienes que hacer es enviar una lista de operaciones que serán convertidas a operaciones ESC POS. Todo esto de manera silenciosa y sin cuadros de confirmación.
Veamos un ejemplo para iniciar la impresora al estado en el que estaba cuando se encendió y luego escribir un hola mundo escribiendo texto:
const listaDeOperaciones = [
{
"nombre": "Iniciar",
"argumentos": []
},
{
"nombre": "EscribirTexto",
"argumentos": [
"Hola impresora\n"
]
}
];
const respuesta = await fetch("http://localhost:8000/imprimir",
{
method: "POST",
body: JSON.stringify({
"serial": "",
"nombreImpresora": "Aquí va el nombre de tu impresora",
"operaciones": listaDeOperaciones
}),
});Es así de simple, solo tienes que enviar la lista de operaciones que serán convertidas a ESC POS en el endpoint del plugin que permite imprimir.
Esto solo es un hola mundo, pero puedes imprimir imágenes, códigos QR, códigos de barras, cambiar el estilo del texto e incluso imprimir HTML convertido a imagen. La lista completa de operaciones está en la documentación oficial:
https://parzibyte.me/http-esc-pos-desktop-docs/es/
Los ejemplos usan la palabra reservada await. Para que await funcione, necesitas estar dentro de una función definida con async. Por ejemplo:
const demostrarImpresion = async()=>{
// Aquí ya puedes usar await
}No tiene que ver con el consumo de la API ni la impresora térmica, es una característica del lenguaje, pero lo aclaro por si tienes problemas usando await en tus ejemplos.
Para que el código funcione necesitas el servidor local ejecutándose y que tu impresora esté compartida. Por favor, sigue los pasos que aparecen en la página previamente enlazada, ya que ahí está la API unificada.
La documentación completa está en: https://parzibyte.me/http-esc-pos-desktop-docs/es/
Puedes ver más conectores y modos de uso en:
Así como la documentación oficial:
https://parzibyte.me/http-esc-pos-desktop-docs/es/
El plugin también es compatible con distribuciones basadas en Debian y Raspbian. Puedes descargarlo como se indica en:
Igualmente ya existe la versión para Android, míralo aquí:
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
Ver comentarios
Buenas! genial el plugin. Estoy probando estos días y probablemente compre la licencia. El tema que ayer y hoy me esta fallando algo. Recién salieron como 10 ticket seguidos iguales, y cada tanto salen 2 o 3 del mismo. Alguna idea cual podría ser el problema? gracias
Hola. Claro, puede ser problema de implementación. Le recomiendo revisar los ejemplos y su código para encontrar el problema
Hola comunidad, alguien pudo imprimir en red? No logro hacerlo funcionar :(
Hola. Gracias por sus comentarios. Si tiene alguna consulta con gusto lo atiendo en https://parzibyte.me/#contacto
Saludos!
El script recibe const RUTA_API = "http://localhost:8000", esto funciona perfecto en la computadora donde esta la impresora, al fijar una ip de Lan en mi caso const RUTA_API = "http://192.168.1.24:8000" funciona perfecto, la interrogante es que mi sitio tiene un certificado SSL y si cambio de localhost a una ip de la lan, por consola me da este error: net::ERR_SSL_PROTOCOL_ERROR
uncaught (in promise) TypeError: Failed to fetch
at Impresora.end
Estoy en pruebas para poder tener el Permium una vez se resuelva este problema.
Muchas Gracias.
No va a funcionar por temas de seguridad
Hola, como esta?
Desde un tiempo llevo usando su sistema de impresión que me ha sido muy útil en mis proyecto, pero en el dia de hoy se me esta presentando el siguiente error
Access to fetch at 'http://localhost:8000/impresoras' from origin 'http://dominio.adquirido' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local.
impresora.js:73 GET http://localhost:8000/impresoras net::ERR_FAILED
Nunca habia tenido un error y hoy me salio este error, me puedes colaborar
Hola. Ya le he respondido por correo pero le dejo aquí un post explicando por si a alguien más le sirve: https://parzibyte.me/blog/2021/10/01/the-request-client-is-not-a-secure-context-and-the-resource-is-in-more-private-address-space-local/
Hola amigo, te pregunto como configuro mi sitio para imprimir ya que tengo la version premium, me sale (index):1 Uncaught (in promise) TypeError: Failed to fetch, yo realizo el siguiente codigo para imprimir de JS
imp = new Impresora()
imp.ruta = 'dominioregistrdo.extencion:4000'
imp.write("................................................")
imp.feed(5)
imp.cut()
imp.imprimirEnImpresora("nombre de impresora")
Al final me sale el error
impresora.js:137 Fetch failed loading: POST "http://dominioregistrdo.extencion:4000/imprimir_en".
imprimirEnImpresora @ impresora.js:137
(anonymous) @ VM1823:1
(index):1 Uncaught (in promise) TypeError: Failed to fetch
Promise.then (async)
imprimirEnImpresora @ impresora.js:141
(anonymous)
amigo, me puedes confirmar por que puerto configuraste el dominio que te proporcione, ya que utilizo el plugin y cada ves que hago new Impresora() me sale el localhost:8000
Hola. Si quiere comunicarse conmigo puede hacerlo desde el correo en donde le envié el plugin premium para una comunicación más directa
Saludos!
Hola. El código que le funciona con el plugin gratuito le debe funcionar con el premium, la única diferencia es que en la gratuita aparece el encabezado y el pie. Por ello es que antes de obtener la versión premium se indica que se familiaricen con la versión gratuita. Recuerde que en la documentación oficial (https://parzibyte.github.io/plugin-ticket-js) hay varios ejemplos
Hola, quiero saber si el .exe se puede instalar en el celular o tablet
Hola, Te pregunto se puede usar el .exe desde un dispositivo móvil como tablet o celular?
Hola. Si puede instalarlo en el dispositivo significa que sí se puede
Saludos
Hola amigo, gracias por su gran aporte, estoy interesado en comprar la versión paga, pero te pregunto hay alguna forma en la cual no se me restringa a ningún dominio aunque el valor aumente, además si te pago hoy mismo cuanto te demoras en activar o mandar el nuevo plugin
Hola. Encontrará toda la información en: https://parzibyte.github.io/plugin-ticket-js/
Saludos
Está genial esto, me ayudó mucho. Cada impresión saca tu logo parzibyte.me/blog. ¿Para quitar el logo debo pagar por la versión premium? ¿en dicho caso cuanto vale?
Hola, gracias por sus comentarios. Le respondo sus dudas en las preguntas frecuentes:
https://parzibyte.github.io/plugin-ticket-js/#faq
Saludos :)
Hola estoy haciendo una prueba desde tu pagina
https://parzibyte.github.io/plugin-ticket-js/ejemplos/simple/index.html
lee las impresoras perfectamente
predetermina la impresora sin problema, en este punto envia un ticket de prueba
pero al darle el boton de imprimir ticket me genera el siguiente error
5/8/2020 16:07:24 Al imprimir: Error en el servidor:
me interesa comprar el plugin
En la consola recibo el siguiente mensaje
Access to fetch at 'http://localhost:8000/imprimir_en' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.