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.

Paso 1: descargar plugin

Ve a la documentación oficial, instala tu impresora y descarga el plugin.

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 dos clases (lo digo por si tienes unas clases que ya llevan ese nombre), una es Impresora, otra es OperacionTicket.

Paso 3: configurar impresora predeterminada

Por favor ve a este ejemplo, selecciona una impresora de la lista (una que sea térmica obviamente) y haz click en Establecer como predeterminada.

Si todo va bien, debe aparecer un ticket indicando que la impresora es compatible.

Recuerda haberla configurado y compartido como lo indico en la documentación.

Paso 4: hola mundo

Ahora que el plugin está instalado y que has incluido la librería, puedes crear una nueva instancia de la clase Impresora así:

let impresora = new Impresora();

El constructor de la clase acepta una URL distinta a la que es por defecto (por si en el futuro cambio el puerto, por ejemplo)

No es necesario que indiques la ruta, como lo dije, se toma la que es por defecto y solo indico esto por si en el futuro permito la posibilidad de cambiarlo.

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

La función end 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.

Más sobre esta librería

A continuación te presento algunos fragmentos de código, por favor recuerda que son tomados directamente de los ejemplos y que debes entenderlos antes de usarlos (si copias y pegas, no funcionará)

Recomiendo que leas un poco sobre los detalles técnicos o veas la documentación oficial.

Por cierto, en todos los ejemplos se usa fetch.

Establecer impresora predeterminada

Si quieres establecer la impresora predeterminada a través de código, puedes hacerlo.

Veamos el fragmento de código que existe en el ejemplo:

Solo tienes que hacer una petición PUT a la ruta del servidor /impresora (por ejemplo localhost:8080/impresora), enviando como JSON el nombre de la impresora.

Si el nombre de la impresora es correcto, el mismo se guardará y los siguientes tickets que imprimas se imprimirán en esa impresora (es decir, este paso solo lo debes hacer una vez).

La respuesta del servidor será una cadena; en caso de que la impresora sea compatible, se regresa el mismo nombre de la impresora y se imprimirá un ticket físico.

Obtener lista de impresoras

Igualmente puedes hacerlo a través de una petición GET /impresoras como en el siguiente fragmento de código en los ejemplos:

Eso devolverá un arreglo de las impresoras compartidas; así puedes mostrarle al usuario las impresoras que puede elegir.

Obtener impresora predeterminada

Finalmente, si quieres saber cuál impresora es la predeterminada, haz una petición GET a /impresora como en el fragmento:

Imprimir

Puedes hacer tu propia librería, simplemente mira los detalles técnicos; al final debes hacer una petición POST a /imprimir, con un arreglo como datos.