En el tutorial de hoy vamos a ver cómo comunicarnos con una impresora térmica desde JavaScript para imprimir tickets, abrir el cajón, cortar el papel y otras cosas usando un plugin como intermediario y HTTP.

Con esto podremos imprimir tickets o recibos desde JS, imprimir imágenes, códigos de barras, códigos QR, imágenes como base64, caracteres personalizados y muchas cosas más.

Prueba el nuevo diseñador

En estos días he creado un nuevo diseñador web para impresoras térmicas. El diseñador te guiará en el proceso de instalar tu impresora, compartirla e instalar lo necesario para imprimir tus diseños. Pruébalo en:

https://parzibyte.me/apps/ticket-designer/#/first-steps

Una vez que tengas tus diseños vas a poder imprimirlos desde cualquier lenguaje de programación, incluyendo JavaScript.

Hola mundo con impresora térmica y JS

Vamos a definir un arreglo de operaciones que serán traducidas a comandos ESC POS y enviadas a la impresora térmica. Voy a usar exactamente el mismo código que se usa para imprimir en impresora térmica con JavaScript del lado del cliente, pues al final la API es consistente.

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. En JavaScript contamos con fetch para hacer peticiones HTTP, ya sea del lado del cliente o del servidor.

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:

https://parzibyte.me/blog/2022/09/30/plugin-impresoras-termicas-version-3/

Así como la documentación oficial:

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

Más ejemplos

Puedes ver demostraciones y conectores en la siguiente página. También puedes ver el código generado para revisar cómo se hacen las cosas.

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

Te dejo con más detalles sobre el plugin y más tutoriales de JavaScript.