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. plugin_v3.4.0_prod_64.exe o plugin_v3.4.0_prod_32.exe el cual se descarga en: https://github.com/parzibyte/plugin-impresora-termica-v3/releases/latest/. Si viene con una DLL, deja dicha DLL en la misma ubicación del plugin
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 plugin_v3.4.0_prod_64.exe o plugin_v3.4.0_prod_64.exe y la DLL que vino con el plugin

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 plugin_v3.4.0_prod_64.exe o plugin_v3.4.0_prod_64.exe 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.github.io/ejemplos-javascript-plugin-v3/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]
            }
        ]
    })
});

El código mostrado está escrito en JavaScript, pero puedes invocar al plugin desde cualquier lenguaje de programación. Permíteme explicarte los valores enviados y la descripción de la API del plugin.

Básicamente es hacer una petición HTTP de tipo POST a http://localhost:8000/imprimir enviando un objeto codificado como JSON con las siguientes propiedades:

• nombreImpresora: cadena que indica el nombre de tu impresora previamente compartida e instalada como genérica
• serial: una cadena vacía al menos que cuentes con un serial. No es necesario que esté llena y su valor no afecta el funcionamiento del plugin
• operaciones: un arreglo de un elemento que debe tener la propiedad nombre establecida en GenerarImagenAPartirDeHtmlEImprimir y la propiedad argumentos establecida en un arreglo indicando, en orden, la cadena HTML que se va a imprimir, el ancho de la página web deseado, el máximo ancho al imprimir dicha página web y el algoritmo para imprimir la imagen, que puede ser 0, 1 o 2.

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:

Documentación Plugin ESC POS Desktop

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

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.