En este post te enseñaré a imprimir HTML en una impresora térmica. Vas a ser capaz de enviar una cadena conteniendo el HTML, renderizarlo e imprimirlo. De esta manera puedes diseñar tickets usando HTML e imprimiéndolos directamente en una POS printer.

Como ya lo anuncié anteriormente en el post de actualización de mi plugin gratuito, ahora se puede imprimir HTML renderizado en una impresora térmica además de todas las otras operaciones existentes.

Veamos cómo hacerlo en esta guía completa. Solo necesitas configurar tu impresora, descargar unas herramientas y después vas a poder imprimir el HTML desde cualquier lenguaje de programación.

Este post es específico para impresoras térmicas con comandos ESC POS. Si tú tienes otro tipo de impresora que no es obligatoriamente térmica entonces puedes ver cómo generar un PDF con HTML e imprimirlo al instante.

Configuración de impresora

Si ya has instalado tu impresora térmica previamente, debes desinstalarla.

Luego debes ir al panel de control, seleccionar el apartado de impresoras. Una vez ahí, elegir Agregar una impresora, esperar a que aparezca “La impresora deseada no está en la lista“, elegir Agregar una impresora local o de red con configuración manual.

En la siguiente ventana elegir el puerto USB00X donde la X es un número, elegir Generic y Generic Text Only en el controlador, dar un nombre sin espacios ni tildes para la impresora y compartirla (si no te da la opción de compartirla, termina la instalación y luego compártela en las propiedades).

Imprime una página de prueba y si la misma es correcta, ya puedes dar por finalizada esta sección. De lo contrario desinstala la impresora y vuelve a instalarla cambiando el puerto. También puedes cambiar el puerto desde las propiedades.

Hay un tutorial extenso y con imágenes en: https://parzibyte.me/blog/2017/12/11/instalar-impresora-termica-generica/

Es obligatorio que la impresora esté instalada como genérica, no tenga espacios o tildes en su nombre y que esté compartida.

Si usas Linux o Raspberry Pi: https://parzibyte.me/blog/2021/07/22/instalar-impresora-termica-linux-imprimir/

Herramienta para impresora térmica

Además de imprimir HTML en tu impresora, vas a necesitar 2 herramientas adicionales:

1. Servidor local HTTP el cual se descarga en: https://parzibyte.me/http-esc-pos-desktop-docs/es/guia/descargar.html
2. wkhtmltoimage.exe el cual se descarga en: https://wkhtmltopdf.org/downloads.html. Descarga el zip para Windows y extrae wkhtmltoimage.exe en la misma carpeta donde se encuentre el plugin (servidor local HTTP) previamente descargado

Nota: ninguna de las herramientas contiene malware, aunque los antivirus o sistemas lo detecten como tal. Es tu responsabilidad obligar al sistema a confiar en los programas y de ser necesario agregarlos a las excepciones.

También he notado que en ocasiones el navegador bloquea la descarga; de nuevo, es tu responsabilidad forzarla.

Una vez descargados, ejecuta el plugin y deja a wkhtmltoimage.exe en el mismo directorio donde se encuentra el archivo que has ejecutado.

Imprimir HTML en impresora térmica

Ahora que ya tienes instalada tu impresora térmica como genérica, le has colocado un nombre siguiendo las pautas previamente mencionadas además de compartirla y por otro lado ya estás ejecutando el plugin, puedes hacer una prueba rápida en la siguiente página de demostración:

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

Recomiendo dejar los parámetros intactos y solo modificar el algoritmo de impresión de imagen en caso de que la imagen no se esté imprimiendo. Si la lista de impresoras está vacía es porque no has ejecutado el plugin correctamente.

Ejemplo para imprimir HTML en POS printer

A continuación te presento el código de ejemplo para enviar HTML a la thermal printer.

const respuestaHttp = await fetch("http://localhost:8000/imprimir", {
    method: "POST",
    body: JSON.stringify({
        nombreImpresora: "El nombre de tu impresora",
        serial: "",
        operaciones: [{
                nombre: "Iniciar",
                argumentos: []
            },
            {
                nombre: "GenerarImagenAPartirDeHtmlEImprimir",
                "argumentos": ["<p>Hola mundo!</p>", 380, 380, 0, false]
            }
        ]
    })
});

El código mostrado está escrito en JavaScript, pero puedes invocar al plugin desde cualquier lenguaje de programación. Permíteme mostrarte la documentación de la operación que acabas de enviar, ya que no solo se puede enviar HTML, también puedes imprimir imágenes, QR, aplicar dithering, escribir texto nativo, entre otras cosas.

La documentación oficial está en: https://parzibyte.me/http-esc-pos-desktop-docs/es/

Por cierto, el arreglo de operaciones puede tener más objetos de tipo operación. Un objeto Operación tiene las propiedades nombre y argumentos. El nombre es una cadena y los argumentos son un arreglo de datos que pueden tener varios tipos.

Puedes ver la documentación de todas las operaciones en:

¿Se puede imprimir HTML desde otro lenguaje de programación?

Por simplicidad, el ejemplo que te he mostrado usa JavaScript para imprimir HTML en una impresora térmica directamente desde el navegador web, pero puedes invocar al plugin desde cualquier lenguaje de programación.

Cualquier lenguaje moderno puede hacerlo, por ahora se me ocurre JavaScript, PHP, Golang, C#, Java, Python e incluso C con libcurl.

Nota: si tienes una aplicación en un servidor que no es local y accedes a ella a través del navegador web, será necesario usar la versión JavaScript del lado del cliente. No puedes acceder a archivos del cliente desde un servidor.

Tips para imprimir HTML en impresora térmica

• Recomiendo diseñar y ver el HTML en un navegador web y con un editor de código decente para que puedas ordenar y ver el diseño que se enviará al plugin. Una vez que estés satisfecho con el diseño, copia y pega el HTML para enviarlo al plugin
• Al enviar el HTML al plugin, envíalo completo, desde la etiqueta <html> y no te olvides de indicar el <meta charset="UTF-8"> para que tenga la codificación correcta y, en palabras simples, puedas imprimir acentos y eñes.
• Puedes ejecutar scripts en el HTML enviado, solo que deben ser “inline”, es decir, no debes importar los scripts de algún sitio, debes colocar el código desde el HTML.  No he probado si la importación de scripts externos funciona, y no la garantizo.
• También puedes indicar estilos CSS con la etiqueta <style> o directamente en la propiedad style de cada elemento
• Puedes enviar imágenes codificadas como base64
• La fuente puede ser cambiada con el estilo CSS. A mí me gusta la Helvetica, pero todo depende de tus gustos.

Aplicación web para imprimir HTML en impresora térmica

En estos días he creado una app web de un editor visual para impresora térmica. Con él puedes definir diseños HTML, guardarlos e imprimirlos. Úsalo en el siguiente enlace:

Editor visual para impresora térmica

Apartado técnico, ¿cómo funciona?

El plugin es capaz de imprimir en impresoras térmicas enviando operaciones como texto, imágenes, códigos de barras, apertura de cajón y muchas más que puedes explorar en la siguiente etiqueta: https://parzibyte.me/blog/category/plugin-esc-pos-v3/

Con la herramienta wkhtmltoimage se puede crear una imagen a partir de HTML. Lo que hace mi plugin es ser un puente para imprimir desde cualquier lenguaje de programación, invocar a wkhtmltoimage cuando es necesario e imprimir la imagen resultante como si fuera cualquier otra imagen.