javascript

Imprimir ticket en impresora térmica usando JavaScript y plugin

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

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:

Paso 1: descargar plugin

Ve a la documentación oficial, instala tu impresora (No olvides compartirla) y descarga el plugin como se indica en la página.

Tal vez tu navegador se queje del mismo, no te preocupes, te aseguro que es totalmente seguro y no es malintencionado.

Cuando acabes de descargar el plugin, ejecútalo, dale permiso de pasar a través del firewall y NO lo cierres.

Paso 2: incluir librería de JavaScript

En tu proyecto de JavaScript incluye el archivo llamado Impresora.js, ya sea descargándolo desde GitHub o desde GitHub pages.

Al incluir la librería tendrás la clase ConectorPluginV3.

Paso 3: hola mundo

Ahora que el plugin está instalado y que has incluido la librería, puedes crear una nueva instancia de la clase ConectorPluginV3 así (el primer argumento es la URL donde escucha el plugin, lo verás mejor en el ejemplo):

const conector = new ConectorPluginV3();

Después simplemente escribe algo de texto y termina la impresión. El código completo es el siguiente:

See the gist on github.

La función imprimirEn regresa una promesa que al resolverse indica el resultado de hacer la impresión.

Ese código debería imprimir tu ticket; si no se puede, por favor mira los ejemplos que están en la documentación.

El código de los ejemplos está en GitHub.

Código completo

El HTML y JavaScript completo (sin incluir el conector del cual ya dejé el enlace anteriormente) queda así:

See the gist on github.

Si quieres puedes ver todos los ejemplos en GitHub o probar directamente lo que te acabo de mostrar en el siguiente enlace, solo asegúrate de estar ejecutando el plugin: https://parzibyte.github.io/ejemplos-javascript-plugin-v3/hola.html

Más sobre esta librería

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

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:

Para Android

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

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

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.
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/

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

  • 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.

  • 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 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 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

  • 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?

    • 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.

Entradas recientes

Imprimir PDF con Bot de Telegram

La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…

2 días hace

Enviar mensaje con bot de Telegram usando JavaScript (lado del cliente)

Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…

3 días hace

PHP: incrustar imagen en base64

El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…

3 días hace

Plugin ESC POS – Actualización 3.4.0: imprimir HTML

El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…

4 días hace

JavaScript (lado del cliente): leer pixeles de imagen

En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…

2 semanas hace

PHP y JavaScript: llenar select con AJAX

Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…

2 semanas hace

Esta web usa cookies.