Plugin para impresora térmica

Plugin para abrir cajón de dinero con JavaScript

Hoy te mostraré un plugin que he desarrollado para abrir el cajón conectado a una impresora térmica desde JavaScript. El plugin tiene ese único propósito: abrir el cajón de dinero desde JS.

Para lograr esto lo que se hace es crear un servidor web que escuche peticiones hechas desde JavaScript y mandar la orden a la impresora (proporcionada por el cliente) para que el cajón de dinero sea abierto.

Así que lo único que tenemos que hacer es una petición de JavaScript al servidor de este plugin y enviarle el nombre de la impresora.

Sobre el plugin

En este caso el plugin no es gratuito. Para obtener el plugin:

  1. Realiza el pago de 200 pesos mexicanos en los medios citados aquí
  2. Una vez realizado el pago, envíame un mensaje
  3. Yo confirmaré el pago y te enviaré el plugin.

Hago este tutorial pensando en que ya tienes el plugin, lo estás ejecutando y has compartido tu impresora.

Por cierto es importante mencionar que el plugin no crea ninguna ventana; simplemente se ejecuta en segundo plano, así que si quieres detenerlo puedes ponerlo en el administrador de tareas.

También puedes hacer que el plugin inicie con el sistema operativo.

Nota: al final dejaré un enlace a un plugin que abre el cajón y hace otras cosas. Ese plugin tiene una versión gratuita, si el mismo te funciona entonces también lo hará el plugin publicado en este post.

Ejecutar plugin para cajón de dinero

El plugin crea un servidor que por defecto escucha en localhost:8080. Eres libre de cambiar el puerto pasando la opción --puerto al ejecutar el programa (puedes modificar el acceso directo si quieres).

Por ejemplo, si quiero que el plugin se ejecute en el puerto :5000 lo ejecuto así:

abrir_cajon_64_bits.exe --puerto=:5000

Y ya como ejemplo, si quieres cambiar el puerto desde el acceso directo ve a las propiedades del mismo y pasa la opción:

Cambiar puerto de plugin para abrir cajón de dinero en acceso directo

Documentación de la API

Ahora el plugin estará escuchando en localhost en el puerto que hayas seleccionado. Para los ejemplos supondré que es el puerto 8080.

Esta API tiene un solo endpoint que es la raíz /, misma que se encarga de abrir el cajón de dinero mandando el pulso a la impresora que le indiques por medio del parámetro GET impresora.

Por ejemplo si quiero abrir el cajón de dinero conectado a la impresora llamada ZJ-58 lo que haría sería invocar a:

http://localhost:8080/?impresora=ZJ-58

Y esta invocación puede ser desde cualquier lugar, solo debes hacer esa llamada HTTP. A continuación te mostraré cómo hacerlo desde JavaScript.

Cabe mencionar que el plugin devolverá un código de respuesta 500 y colocará el error en el cuerpo de la respuesta si hubo un error (por ejemplo, que la impresora no exista).

Cliente JavaScript

Me parece que puedes usar cualquier librería para hacer la petición HTTP, yo usaré fetch pero esto es compatible con axios o incluso el viejo $.get de jQuery.

Aquí el ejemplo:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Abrir cajón de impresora con JavaScript - By Parzibyte</title>
</head>

<body>
 <button id="btnAbrirCajon">Abrir cajón</button>
 <script>
  document.addEventListener("DOMContentLoaded", () => {
   const $boton = document.querySelector("#btnAbrirCajon");
   /*
    Cambiar según tus ajustes
   */   const nombreImpresora = "ZJ-58",
    puerto = "8080";

   const abrirCajon = async () => {
    const respuesta = await fetch(`http://localhost:${puerto}/?impresora=${nombreImpresora}`);
    const respuestaDecodificada = await respuesta.json();
    if (respuesta.status === 200) {
     alert("Cajón abierto");
    } else {
     alert("Error abriendo: " + respuestaDecodificada);
    }
   };
   $boton.onclick = abrirCajon;
  });
 </script>
</body>

</html>

En lo único que debes centrarte es en la función abrirCajon, a esta función puedes invocarla desde cualquier lugar de tu aplicación. Solo configura correctamente el nombre de tu impresora y el puerto.

Igualmente en lugar de usar alert para mostrar los resultados puedes usar console.log, Sweetalert o lo que consideres pertinente.

Para finalizar te recuerdo que tengo un plugin que hace esto y mucho más con las impresoras térmicas, es decir, es un plugin completo para impresoras térmicas desde JS.

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

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

18 horas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

1 semana hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

1 semana hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

1 semana hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

1 semana hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

1 semana hace

Esta web usa cookies.