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.

Importando conector

Para comunicarte con el plugin puedes usar el conector programado por mí. Lo dejo a continuación, recuerda que puedes incluirlo en tu proyecto con una etiqueta <script> o simplemente pegando todo el código.

Está en GitHub para que siempre descargues la última versión: https://github.com/parzibyte/ejemplos-javascript-plugin-v3/blob/main/ConectorJavaScript.js

Simplemente ve al enlace, copia todo e inclúyelo como cualquier otro script. No dejo el código aquí porque cuando lo actualice solo lo haré en GitHub.

Obtener lista de impresoras

Si tú quieres darle al usuario la oportunidad de elegir su impresora, puedes invocar al método obtenerImpresoras para obtener las impresoras compartidas.

const impresoras = await ConectorPluginV3.obtenerImpresoras();

En este caso impresoras será un arreglo de tipo cadena con la lista de impresoras. Por cierto, en el ejemplo de arriba estoy usando await pero puedes hacerlo con promesas:

ConectorPluginV3.obtenerImpresoras()
.then(impresoras =>{
  // Aquí hacer algo con impresoras
});

Nota: tanto esta y la función imprimirEn pueden manejarse con async y await o con promesas. Es tu decisión cuál usas.

Hola mundo con impresora térmica y JS

Veamos ahora cómo crear un recibo e imprimirlo en la impresora térmica. Primero debes crear una instancia de ConectorPluginV3 y encadenar todos los métodos que prefieras. Aquí un ejemplo simple:

const nombreImpresora = "ZJ-58"; // Puede ser obtenida de la lista de impresoras o puedes escribirlo si lo conoces
const conector = new ConectorPluginV3();
const respuesta = await conector
    .Iniciar()
    .EscribirTexto("Hola mundo")
    .Feed(1)
    .imprimirEn(nombreImpresora);

Como puedes ver, al final debes invocar a imprimirEn pasándole el nombre de la impresora como cadena y esperar la respuesta.

Si la respuesta es true entonces la impresión fue correcta, si no, la respuesta tendrá el mensaje de error.

Nota: te repito que puedes usar async y await o promesas.

Recuerda que al crear una instancia de ConectorPluginV3 puedes pasar la URL del plugin en caso de que no lo estés ejecutando en el puerto por defecto, y lo mismo aplica para el método obtenerImpresoras.

Descargando plugin

Para que esto funcione debes descargar el plugin y configurar tu impresora como ahí se menciona. A continuación dejo el enlace, te recomiendo verlo y después volver. Primero descarga el plugin: https://github.com/parzibyte/plugin-impresora-termica-v3/releases/tag/3.2.1

Luego comparte tu impresora: https://parzibyte.me/blog/2017/12/11/instalar-impresora-termica-generica/

De hecho en el plugin ya está un ejemplo con JavaScript, pero si quieres la explicación detallada sigue leyendo y luego podrás revisar el código fuente.

Nota: si tú quieres imprimir de JavaScript a una impresora Bluetooth mira:

https://parzibyte.me/blog/2022/11/01/plugin-gratuito-impresoras-termicas-bluetooth-android/

Imprimir ticket de compra en impresora Xprinter o Epson con JavaScript

A continuación te muestro un ejemplo más avanzado. Fíjate en que podemos encadenar todos los métodos:

const amongUsComoCadena = `000001111000
000010000100
000100011110
000100100001
011100100001
010100100001
010100100001
010100011110
010100000010
011100000010
000100111010
000100101010
000111101110
000000000000
000000000000
000000000000
111010101110
100010101000
111010101110
001010100010
111011101110
000000000000
000000000000
000000000000`;
const conector = new ConectorPluginV3();
const respuesta = await conector
    .Iniciar()
    .DeshabilitarElModoDeCaracteresChinos()
    .EstablecerAlineacion(ConectorPluginV3.ALINEACION_CENTRO)
    .DescargarImagenDeInternetEImprimir("http://assets.stickpng.com/thumbs/587e32259686194a55adab73.png", 0, 216)
    .Feed(1)
    .EscribirTexto("Parzibyte's blog\n")
    .EscribirTexto("Blog de un programador\n")
    .TextoSegunPaginaDeCodigos(2, "cp850", "Teléfono: 123456798\n")
    .EscribirTexto("Fecha y hora: " + (new Intl.DateTimeFormat("es-MX").format(new Date())))
    .Feed(1)
    .EstablecerAlineacion(ConectorPluginV3.ALINEACION_IZQUIERDA)
    .EscribirTexto("____________________\n")
    .TextoSegunPaginaDeCodigos(2, "cp850", "Venta de plugin para impresoras versión 3\n")
    .EstablecerAlineacion(ConectorPluginV3.ALINEACION_DERECHA)
    .EscribirTexto("$25\n")
    .EscribirTexto("____________________\n")
    .EscribirTexto("TOTAL: $25\n")
    .EscribirTexto("____________________\n")
    .EstablecerAlineacion(ConectorPluginV3.ALINEACION_CENTRO)
    .HabilitarCaracteresPersonalizados()
    .DefinirCaracterPersonalizado("$", amongUsComoCadena)
    .EscribirTexto("En lugar del simbolo de pesos debe aparecer un among us\n")
    .EscribirTexto("TOTAL: $25\n")
    .EstablecerEnfatizado(true)
    .EstablecerTamañoFuente(1, 1)
    .TextoSegunPaginaDeCodigos(2, "cp850", "¡Gracias por su compra!\n")
    .Feed(1)
    .ImprimirCodigoQr("https://parzibyte.me/blog", 160, ConectorPluginV3.RECUPERACION_QR_MEJOR, ConectorPluginV3.TAMAÑO_IMAGEN_NORMAL)
    .Feed(1)
    .ImprimirCodigoDeBarrasCode128("parzibyte.me", 80, 192, ConectorPluginV3.TAMAÑO_IMAGEN_NORMAL)
    .Feed(1)
    .EstablecerTamañoFuente(1, 1)
    .EscribirTexto("parzibyte.me\n")
    .Feed(3)
    .Corte(1)
    .Pulso(48, 60, 120)
    .imprimirEn("ZJ-58");
if (respuesta === true) {
    alert("Impreso correctamente");
} else {
    alert("Error: " + respuesta);
}

Recuerda que la documentación está en la página del plugin: https://parzibyte.me/blog/2022/09/30/plugin-impresoras-termicas-version-3/

Al imprimir debería aparecer un ticket como el siguiente:

Y así es como puedes comunicarte desde JavaScript a una impresora térmica que entienda comandos ESC POS. Recuerda que hay más métodos que no mostré en el ejemplo y que puedes leer en la documentación oficial.

Más ejemplos

Puedes ver demostraciones y conectores en la siguiente página. También puedes ver el código fuente de la misma para revisar cómo se hacen las cosas; al final el conector de JS y el código de los ejemplos son open source.

https://parzibyte.github.io/ejemplos-javascript-plugin-v3/

Remover créditos de pie de página

En caso de que quieras obtener una licencia encontrarás los detalles aquí: https://parzibyte.me/blog/2022/09/30/plugin-impresoras-termicas-version-3/

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