Imprimir ticket en impresora térmica usando JavaScript y plugin

63 comentarios / javascript, Plugin ESC POS v3, web / Por

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.

English version here.

Y también he desarrollado un plugin para Android, míralo aquí:

Plugin gratuito para impresoras térmicas Bluetooth en Android

Yo recomiendo la versión 3 y final, pero si quieres puedes ver las otras versiones igualmente.

Demostración en YouTube

¿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:

Imprimir en impresora térmica con JavaScript

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/

Nota sobre async y await

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.

Configurando impresora y descargar servidor HTTP

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/

Más sobre esta librería

Puedes ver más conectores y modos de uso en:

Plugin para impresoras térmicas versión 3

Así como la documentación oficial:

https://parzibyte.me/http-esc-pos-desktop-docs/es/

Versión para Linux y Raspberry Pi

El plugin también es compatible con distribuciones basadas en Debian y Raspbian. Puedes descargarlo como se indica en:

Plugin para impresoras térmicas versión 3

Para Android

Igualmente ya existe la versión para Android, míralo aquí:

Plugin gratuito para impresoras térmicas Bluetooth en Android

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

63 comentarios en “Imprimir ticket en impresora térmica usando JavaScript y plugin”

  1. Maxi

    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

    Responder
  3. Jean Carlos

    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.

    Responder
  4. Hernando

    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

    Responder
  5. Hernando

    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)

    Responder
    1. parzibyte

      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

    2. hernando

      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

  8. Hernando Hernandez

    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

    Responder
  9. Juan

    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?

    Responder
    1. Francisco Cruz

      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.

  11. Wil

    En la version premium cuando mencionas esto de los 3 dominios, a que te refieres, donde configuras los dominios, o te refieres que el plugin solo podra recibir peticiones de 3 dominios/subdominios diferentes?

    Responder
  15. Crystien Guzman

    Buenas Noches amigo Parzibyte, primero que nada debo agradecer toto el aporte que has hecho. pero requiero de tu ayuda para solucionar un problema que ya me esta dando dolor de cabeza. Me esta generando un error al momento de mandar a imprimir mientras que cuando le doy a establecer como predeterminado si se ejecuta exitosamente.. Podrias ayudame por favor

    Responder
    1. parzibyte

      Hola, gracias por sus comentarios. Le genera algún error o simplemente no imprime? debería refrescar la página e intentar de nuevo; o probar con el método imprimirEnImpresora que le permite indicar el nombre de la misma.
      Saludos 🙂

    2. Crystien Guzman

      Ya probe varios metodos de los que indica y no se que pasa, el error que genera es incluso desde la pagina que coloca como test (27/1/2020 21:20:03 Al imprimir: Error en el servidor: ) ese es el error…. pero cuando coloco la impresora como predeterminada desde el boton si me genera una informacion. Por favor ayuda.

    3. Crystien Guzman

      27/1/2020 21:20:03 Al imprimir: Error en el servidor: ese es el error que me dio amigo.! ya no se que probar para que envie la impresion. Sin embargo con el metodo de impresion desde PHP si me funciono solo que al subirlo a un servidor (nube cpanel) me da error al imprimir tambien entonces estoy en ese problema. Sera que puedes ayudarme amigo por favor

  18. giancarlo melgarejo

    Buenas tardes,

    Quisiera mas información sobre la versión premium, a que se refiere que solo es para 3 dominios ? , eso quiere decir que una ves que establezca los dominios ya no los podre cambiar ?, por ejemplo si yo trabajo con un dominio y a futuro el dominio lo cambio ya no podre hacer eso ? , la licencia es permanente o tengo que pagar algo al año ?

    Responder
  19. llanera_sol

    Hola, alguna idea para imprimir cupones uno tras otro?; es decir que si genero 3 cupones, que la impresora haga el corte por cupon, a mi me sale los 3 cupones en uno(impresora epson t88v)

    Responder
    1. parzibyte

      Hola, buen día. Lo que dices sería algo así:
      // iniciar impresora y todo eso. Después:
      impresora.write(“Cupón 1”);
      impresora.cut();
      impresora.cutPartial();
      impresora.write(“Cupón 2”);
      impresora.cut();
      impresora.cutPartial();
      impresora.write(“Cupón 3”);
      impresora.cut();
      impresora.cutPartial();
      impresora.imprimirEnImpresora(“Tu impresora”);

      Ten en cuenta que la impresora debe poder cortar el papel. Saludos

  20. ervin

    con unas cuantas dudas, espero se pueda resolver:
    1- porque al inicio me imprime una “@”.
    2- cuando finaliza la impresión corta y me desperdicia una porcion de papel.
    3- como puedo agregar un marco a la impresion.
    4- como puedo agregar una codigo de barra.

    de antemano muchas gracias, y buen aporte del plugin

    Responder
    1. parzibyte

      Hola. Respondo tus dudas:
      1 – No lo sé, no me ha pasado a mí y a ninguno de mis clientes. Supongo que es el modelo de tu impresora
      2 – Puede que sea el encabezado y pie, o cuestión de modificar el plugin para evitar el corte
      3 – No es posible por el momento
      4 – No es posible por el momento pero en un futuro lo será
      Saludos 🙂

  24. Pablo

    Amigo al momento de presionar el boton impresora predeterminada me da el siguiente error:
    No se pudo establecer la impresora con el nombre \\192.168.2.2\Star SP700 TearBar (SP712)

    Responder
    1. parzibyte

      Hola; las impresoras de etiquetas son muy distintas a las impresoras térmicas. Por suerte, las mismas vienen (la mayoría de veces) acompañadas con un software de impresión de etiquetas así que solo basta con descargarlo, y listo (tal vez requieran el serial o el comprobante de compra)
      Saludos

  27. Orlando

    gracias por el aporte, una pregunta no es necesario llamar a la libreria ?? el archivo Imprimir.js esta en un carpeta que es JS no abra problemas sobre la ruta??

    Responder
    1. parzibyte

      Hola, no importa la ubicación de Impresora.js siempre y cuando la cargues correctamente. Podría estar en una carpeta como js/a/b/c/Impresora.js pero en tu HTML debes incluirlo igual con la misma ruta
      Saludos

    2. Orlando

      realize los pasos como mencionas, pero al momento de hacer imprimir me sale en la pantalla el código de imprimir.js donde menciona HOLA MUNDO , donde podría ser error xfavor no manejo muy bien el javascript.
      El envió que hago es mediante un <a href=’js/imprimir.js’>
      Y gracias de antemano por tiempo

  29. Gustavo

    Hola que tal, estoy probando tu método, pero en tu página nunca logra establecer la impresora, a pesar de estar corriendo el servidor y ya permitirle todos los permisos de firewall, aun asi intente darle imprimir y me manda este error Al imprimir: Error en el servidor: sql: no rows in result set

    Responder
    1. parzibyte

      Hola, buen día. El error es porque no se ha establecido la impresora, por lo tanto no puede leer datos (no rows) de la BD, porque no se han guardado.
      El nombre de la impresora solamente se guarda si la impresión es exitosa, pero en tu caso parece que no se puede establecer la impresora que intentas, tal vez no la has compartido

Dejar un comentario

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