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.
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.
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"}
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.
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/
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>
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.
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.
Ver comentarios
Para quitar el pie de pagina que necesito?
Usted puede usar el plugin sin límites, pero si no quiere respetar mis créditos que aparecen en el pie puede removerlos con una licencia: https://parzibyte.me/blog/2022/10/02/contratar-licencia-para-plugin-impresora-termica-v3/
intento usar tu codigo pero sin resultados, estoy enviando el id por ajax y no me imprime, lo envie por el metodo POST y GET pero no imprime, tu pasas la variable por un link que recarga la pagina, en mi caso envio la variable por ajax para que no recargue la pagina.
Hola. En el momento que usted modifica el código, ya no es mi código. El código que yo he publicado funciona perfectamente, pero en caso de que usted lo haya modificado y tenga problemas, usted es quien debe ajustarlo. Si va a usar AJAX entonces probablemente no necesite para nada este post, en ese caso puede que le sirva el siguiente: https://parzibyte.me/blog/2022/09/30/comunicar-javascript-impresora-termica-usando-plugin-v3/
Recuerde que si necesita ayuda adicional estoy para servirle en https://parzibyte.me/#contacto