Impresora térmica con PHP y plugin

Desde hace tiempo presenté mi plugin para comunicación con impresoras térmicas que permite imprimir con comandos ESC POS desde cualquier lugar saltando las limitaciones del navegador web y de los lenguajes de programación.

Hoy te enseñaré cómo usarlo con PHP, aunque técnicamente vamos a usar JavaScript ya que si bien podemos hacer peticiones con PHP, necesitamos hacer estas peticiones desde el cliente y no desde el servidor, sobre todo cuando PHP está en un servidor web.

No te preocupes, será un código muy sencillo y funcionará igualmente con o sin internet. Veamos cómo imprimir en una impresora térmica desde PHP pero en modo cliente.

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

Preparando los detalles del ticket

Comencemos revisando el código de PHP que nos dará los detalles del ticket a partir de un ID. Este ID podría ser el de una venta, pedido o cualquier cosa.

Por simplicidad yo no usaré bases de datos, pero el ejemplo quedará listo para que tú lo modifiques y puedas traer los datos desde cualquier lugar.

<?php
if (!isset($_GET["id"])) {
    exit("No hay id");
}
$id = $_GET["id"];
$datos = [
    "id" => $id,
    "productos" => [
        [
            "nombre" => "Alcohol isopropílico",
            "precio" => 20,
        ],
        [
            "nombre" => "Mouse razer",
            "precio" => 500,
        ],
    ],
    "fecha" => date("Y-m-d"),
];
echo json_encode($datos);

Fíjate que el id se pasa por parámetro GET. Yo no estoy haciendo nada con ese id pero en tu caso puedes usarlo para consultar en tu base de datos.

Luego estoy pasando todos esos datos como JSON. Al consultar esa página, la salida es un objeto JSON que tiene varias propiedades y un arreglo:

{"id":"1","productos":[{"nombre":"Alcohol isoprop\u00edlico","precio":20},{"nombre":"Mouse razer","precio":500}],"fecha":"2023-06-25"}

Imprimir ticket con PHP

La página anterior fue hecha con puro PHP. No importa si utilizas un framework y tampoco importa tu estilo de programación. Solo debes asegurarte de que los datos sean mostrados correctamente. Ahora vamos a consultar esos datos desde JavaScript e imprimirlos.

Primero leemos el ID del ticket que vamos a imprimir y lo consultamos en PHP usando AJAX. Te repito que esto puede ser un id de venta, un id de pedido o cualquier otro tipo de dato.

const urlSearchParams = new URLSearchParams(window.location.search);
const id = urlSearchParams.get("id");
const respuestaRaw = await fetch("./obtener_detalles_ticket.php?id=" + id);
const detallesTicket = await respuestaRaw.json();

Ahora detallesTicket tendrá lo que obtener_detalles_ticket.php haya devuelto. Procedemos a consumir la API de impresión HTTP a ESC POS desde JavaScript embebido en PHP:

// Documentación de operaciones:
// https://parzibyte.me/http-esc-pos-desktop-docs/es/
const operaciones = [{
        nombre: "EscribirTexto",
        argumentos: ["Ticket de venta\n"],
    },

    {
        nombre: "EscribirTexto",
        argumentos: ["Fecha: " + detallesTicket.fecha],
    },
    {
        nombre: "Feed",
        argumentos: [1],
    },
];
for (const producto of detallesTicket.productos) {
    operaciones.push({
        nombre: "EscribirTexto",
        argumentos: [
            producto.nombre + " precio: " + producto.precio
        ]
    }, {
        nombre: "Feed",
        argumentos: [
            1,
        ]
    });
}

Finalmente hacemos la impresión en la impresora que la API de PHP nos haya indicado. Esto devolverá un objeto con la propiedad ok y un message de tipo string. Si todo fue correcto, ok estará en true, de lo contrario, estará en false y el mensaje de error estará en message.

const cargaUtil = {
    "serial": "",
    "nombreImpresora": detallesTicket.nombreImpresora,
    "operaciones": operaciones,
};
const respuestaHttp = await fetch("http://localhost:8000/imprimir", {
    method: "POST",
    body: JSON.stringify(cargaUtil),
})
const respuestaComoJson = await respuestaHttp.json();
if (respuestaComoJson.ok) {
    window.location.href = "./index.php";
} else {
    // El mensaje de error está en la propiedad message
    alert("Error al imprimir ticket: " + respuestaComoJson.message);
}

Al ejecutar ese código debería imprimirse un ticket así:

Fíjate que tiene los detalles que colocamos en PHP. Obviamente este es un recibo muy simple, ya después puedes crear diseños más complejos agregando imágenes, códigos QR, tablas, etcétera. Por ejemplo:

Y la ventaja de esto es que has impreso un ticket desde PHP pero cuando PHP y Apache están en internet en un servidor web o VPS.

Configurando impresora y descargar servidor HTTP

Para que el código funcione necesitas el servidor local 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/

Página para imprimir ticket

Finalmente veamos la “interfaz” para imprimir, en donde simplemente debemos redireccionar a imprimir_ticket.php pasando el id:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imprimir ticket</title>
</head>

<body>
    <a href="./imprimir_ticket.php?id=1">Imprimir</a>
</body>

</html>

Poniendo todo junto

Te dejo el código completo en GitHub.

Una vez que la demostración funcione, podrás imprimir tickets más complejos. Te invito a ver la documentación oficial.