El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para imprimir en una POS printer a partir de HTML o una página web.
Con la nueva actualización vas a poder diseñar un ticket a partir de HTML agregando estilos e incluso JavaScript, colocando imágenes, códigos QR, texto con tildes, fuentes distintas, etcétera.
Todo lo que puedas hacer en una página web con HTML estático vas a poder imprimirlo en una impresora térmica. Veamos cómo usar estas nuevas funcionalidades del plugin.
Se han agregado las siguientes operaciones al plugin:
Para imprimir en una impresora térmica a partir de una cadena HTML el proceso que se sigue es invocar a wkhtmltoimage
pasándole el HTML proporcionado por el invocador y después imprimir la imagen en la impresora térmica usando el algoritmo indicado.
Básicamente se imprime una imagen, pero esa imagen fue creada con HTML. Sobra decir que la nitidez no será la misma, pero esta operación solo es una más que se agrega al plugin; puedes seguir imprimiendo texto e imágenes nativamente.
Para el caso de la página web, el proceso es exactamente el mismo, la única diferencia es que se visita la página web proporcionada, se descarga su HTML y se imprime con el primer método explicado.
Para lograr la impresión de HTML en impresora térmica, mi plugin necesita que el ejecutable wkhtmltoimage.exe
esté disponible en la PATH del sistema. Dicho con palabras simples, el plugin y wkhtmltoimage deben estar en la misma ubicación.
Descarga wkhtmltoimage del siguiente sitio. No la he programado yo ni tengo alguna relación con los creadores; simplemente mi plugin la usa. Te recomiendo descargar el zip para Windows y después extraer wkhtmltoimage: https://wkhtmltopdf.org/downloads.html
Mi plugin puede ser invocado desde cualquier lenguaje de programación simplemente indicando las operaciones.
Para imprimir HTML a partir de código HTML, envía la cadena HTML que se convertirá a imagen y se imprimirá. Para ello necesitas la operación GenerarImagenAPartirDeHtmlEImprimir. Veamos un ejemplo simple que puedes probar en el playground:
const cargaUtil = {
"serial": "",
"nombreImpresora": "Nombre de tu impresora",
"operaciones": [
{
"nombre": "Iniciar",
"argumentos": []
},
{
"nombre": "GenerarImagenAPartirDeHtmlEImprimir",
"argumentos": [
"<html><meta charset=\"UTF-8\"><p><strong>¡Hola</strong> mundo!</p></html>",
380,
380,
0,
false
]
},
{
"nombre": "Iniciar",
"argumentos": []
},
{
"nombre": "Feed",
"argumentos": [
2
]
}
]
};
const respuestaHttp = await fetch("http://localhost:8000/imprimir", {
method: "POST",
body: JSON.stringify(cargaUtil)
});
const respuesta = await respuestaHttp.json();
if (respuesta.ok) {
console.log("Impreso correctamente")
} else {
console.error("Petición ok pero error en el plugin: " + respuesta.message);
}
También puedes proporcionar una URL y el plugin se encargará de descargarla, convertirla a imagen e imprimirla. De nuevo veamos el código de ejemplo a continuación que ya puedes probar en el área de pruebas:
const cargaUtil = {
"serial": "",
"nombreImpresora": "Termica",
"operaciones": [
{
"nombre": "Iniciar",
"argumentos": []
},
{
"nombre": "GenerarImagenAPartirDePaginaWebEImprimir",
"argumentos": [
"https://example.com/",
380,
380,
0,
false
]
},
{
"nombre": "Iniciar",
"argumentos": []
},
{
"nombre": "Feed",
"argumentos": [
2
]
}
]
};
const respuestaHttp = await fetch("http://localhost:8000/imprimir", {
method: "POST",
body: JSON.stringify(cargaUtil)
});
const respuesta = await respuestaHttp.json();
if (respuesta.ok) {
console.log("Impreso correctamente")
} else {
console.error("Petición ok pero error en el plugin: " + respuesta.message);
}
Si quieres ver la descripción de cada operación y mantenerte al tanto de la documentación oficial ya existe el sitio de la documentación para el plugin HTTP a ESC POS: https://parzibyte.me/http-esc-pos-desktop-docs/es/
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.