Imprimir acentos en impresora térmica con JavaScript

Dejar un comentario / javascript, Plugin ESC POS v3 / Por

Por mucho tiempo he buscado la manera de imprimir texto en español en un ticket con una impresora térmica desde JavaScript, incluyendo también la letra ñ, el signo de apertura de interrogación, etcétera.

Recibo de compra con acentos y letras ñ usando JavaScript e impresora térmica
Recibo de compra con acentos y letras ñ usando JavaScript e impresora térmica

Esto es necesario porque en varias ocasiones necesitamos colocar algo como ¡Gracias por su compra! al final del ticket, y si no contamos con el símbolo ¡ entonces el mensaje puede no verse bien.

Lo mismo pasa cuando el nombre de un cliente tiene acentos y necesitamos imprimirlo en el ticket. Por ello es que en este post te mostraré cómo imprimir texto con acentos en una impresora térmica usando JavaScript.

Configurar impresora y descargar servidor HTTP a ESC POS

Para que el código funcione necesitas el servidor local de la API ESC POS ejecutándose y que tu impresora esté compartida. Por favor, sigue los pasos que aparecen en la página previamente enlazada, ya que ahí está la API unificada.

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

Probar si la impresora soporta acentos sin configurar nada

Algunas impresoras soportan la impresión de texto en español, acentos y eñes sin configurar nada. Solo debes imprimir el texto normalmente. Veamos el siguiente ejemplo:

Comenzamos creando una lista de operaciones que se van a ejecutar en la impresora térmica, una vez que la tenemos agregamos la operación EscribirTexto y luego enviamos esa carga útil a la API HTTP local del plugin:

const cargaUtil = {
  "serial": "",
  "nombreImpresora": "Termica",
  "operaciones": [
    {
      "nombre": "EscribirTexto",
      "argumentos": [
        "¡Gracias por su compra, María José!\nFeliz año nuevo\n"
      ]
    }
  ]
};
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);
}

En la impresora GOOJPRT PT-210 funciona sin configurar y la salida es igual a la que se ve a continuación:

Imprimir acentos en impresora térmica con JavaScript

Si en tu caso tu impresora no lo soporta vamos a ver una solución, ya que yo tengo una Xprinter X-58 y aparecen caracteres chinos o letras extrañas pero no aparece el texto en español.

Imprimiendo acentos

Ahora vamos a forzar a que tu impresora imprima texto con acentos. Si tu impresora es china deberías invocar al método DeshabilitarElModoDeCaracteresChinos y después de eso invocar a TextoSegunPaginaDeCodigos enviando el número de página, la codificación y el texto.

En mi caso he usado la página número 2 pero en lugar de cp860 (como debería ser) especifico cp850

Así puedo imprimir lo siguiente con todo y acentos, signos, etcétera:

cp850 con numero 2 ¿EL VELOZ MURCIÉLAGO
HINDÚ COMÍA FELIZ CARDILLO Y KIWI? ¡LA CIGÜEÑA TOCABA EL SAXOFÓN DETRÁS DEL
PALENQUE DE PAJA!.

cp850 con número 2 ¿el veloz murciélago hindú comía feliz
cardillo y kiwi? ¡la cigüeña tocaba el saxofón detrás del palenque de paja!.

El código queda como se ve a continuación:

const cargaUtil = {
  "serial": "",
  "nombreImpresora": "Nombre de tu impresora",
  "operaciones": [
    {
      "nombre": "Iniciar",
      "argumentos": []
    },
    {
      "nombre": "DeshabilitarElModoDeCaracteresChinos",
      "argumentos": []
    },
    {
      "nombre": "TextoSegunPaginaDeCodigos",
      "argumentos": [
        2,
        "cp850",
        "cp850 con numero 2 ¿EL VELOZ MURCIÉLAGO HINDÚ COMÍA FELIZ CARDILLO Y KIWI? ¡LA CIGÜEÑA TOCABA EL SAXOFÓN DETRÁS DEL PALENQUE DE PAJA!."
      ]
    },
    {
      "nombre": "Feed",
      "argumentos": [
        2
      ]
    },
    {
      "nombre": "TextoSegunPaginaDeCodigos",
      "argumentos": [
        2,
        "cp850",
        "cp850 con numero 2 ¿el veloz murciélago hindú comía feliz cardillo y kiwi? ¡la cigüeña tocaba el saxofón detrás del palenque de paja!."
      ]
    },
    {
      "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);
}

El resultado del ejemplo es:

Texto con acentos y página de códigos

Y puedes probarlo en el área de pruebas, cambiando los valores de las páginas en caso de que no funcione en la primera vez.

Ejemplo completo: ticket de venta

Recibo de compra con acentos y letras ñ usando JavaScript e impresora térmica
Recibo de compra con acentos y letras ñ usando JavaScript e impresora térmica

Para demostrar más las capacidades de este plugin voy a crear un pequeño ticket de venta. El código queda así:

const cargaUtil = {
  "serial": "",
  "nombreImpresora": "Nombre de tu impresora",
  "operaciones": [
    {
      "nombre": "EstablecerAlineacion",
      "argumentos": [
        1
      ]
    },
    {
      "nombre": "DescargarImagenDeInternetEImprimir",
      "argumentos": [
        "https://github.com/parzibyte.png",
        380,
        0,
        true
      ]
    },
    {
      "nombre": "Feed",
      "argumentos": [
        2
      ]
    },
    {
      "nombre": "EscribirTexto",
      "argumentos": [
        "Parzibyte's blog\nBlog de un programador\n"
      ]
    },
    {
      "nombre": "DeshabilitarElModoDeCaracteresChinos",
      "argumentos": []
    },
    {
      "nombre": "TextoSegunPaginaDeCodigos",
      "argumentos": [
        2,
        "cp850",
        "Teléfono: 123456789\n"
      ]
    },
    {
      "nombre": "EscribirTexto",
      "argumentos": [
        "Fecha/Hora: 2021-02-08 16:57:55\n"
      ]
    },
    {
      "nombre": "EstablecerEnfatizado",
      "argumentos": [
        true
      ]
    },
    {
      "nombre": "EscribirTexto",
      "argumentos": [
        "Cliente: "
      ]
    },
    {
      "nombre": "EstablecerEnfatizado",
      "argumentos": [
        false
      ]
    },
    {
      "nombre": "TextoSegunPaginaDeCodigos",
      "argumentos": [
        2,
        "cp850",
        "María José\n"
      ]
    },
    {
      "nombre": "EscribirTexto",
      "argumentos": [
        "--------------------------------\nAudífonos HyperX\n"
      ]
    },
    {
      "nombre": "EstablecerAlineacion",
      "argumentos": [
        2
      ]
    },
    {
      "nombre": "EscribirTexto",
      "argumentos": [
        "25 USD\n--------------------------------\nTOTAL: 25 USD\n--------------------------------\n"
      ]
    },
    {
      "nombre": "EstablecerAlineacion",
      "argumentos": [
        1
      ]
    },
    {
      "nombre": "TextoSegunPaginaDeCodigos",
      "argumentos": [
        2,
        "cp850",
        "¡Muchas gracias por su compra y feliz año nuevo 2021!"
      ]
    },
    {
      "nombre": "Feed",
      "argumentos": [
        4
      ]
    },
    {
      "nombre": "Corte",
      "argumentos": [
        1
      ]
    }
  ]
};
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);
}

Mismo que puedes probar en el área de pruebas. En este caso el nombre del cliente lleva acentos, el mensaje al final del ticket lleva la letra ñ así como el símbolo de apertura de exclamación.

Al final puedes diseñar tus tickets como te parezca, aquí solo te demuestro las capacidades del plugin.

Puedes ver la descripción completa de la documentación así como hacer pruebas en el playground en el siguiente enlace que detalla el plugin HTTP a ESC POS: https://parzibyte.me/http-esc-pos-desktop-docs/es/

Sobre las páginas de códigos

Las páginas de códigos cambian dependiendo de la impresora. Al imprimir en la impresora no es necesario indicar la codificación, pero yo lo hago porque convierto los caracteres usando iconv.

Si no te funciona con una página de códigos deberías probar combinando el número y el nombre de la página o leyendo la documentación de tu impresora.

Por cierto, en este caso lo hicimos con JavaScript pero el plugin también funciona en Python, Java y cualquier lenguaje que hable HTTP. La descripción de la API está en: https://parzibyte.me/http-esc-pos-desktop-docs/es/api/introduccion.html

Recuerda que si necesitas ayuda puedes enviarme un mensaje en https://parzibyte.me/#contacto.

Alternativa con HTML

También puedes usar HTML para definir tu ticket, convertirlo a imagen e imprimirlo. Las páginas web pueden tener tildes y cualquier tipo de caracteres, así que sería como imprimir una captura de pantalla.

El plugin ya incluye esa característica que se describe en: imprimir HTML en impresora térmica.

Imprimir HTML con impresora térmica

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *