Introducción
Actualización agosto 2019
¿Quieres imprimir con JavaScript sin usar el diálogo de impresión, con la posibilidad de cortar el papel y abrir el cajón de dinero? mira este post.
Recientemente escribí un tutorial sobre cómo imprimir un ticket en una impresora térmica usando PHP. Veamos entonces cómo podemos imprimir ticket en impresora térmica usando JavaScript.
Las complicaciones que tenemos al imprimir con PHP son:
- Confusión de cómo usar la librería
- Forzar a que el lenguaje del servidor sea PHP
Así que ahora decidí hacer una entrada para saber cómo imprimir un ticket en una impresora térmica sin usar PHP, sólo Javascript. El resultado será el siguiente:
Cuando terminemos, la interfaz se verá como aparece abajo. Puedes probarlo directamente haciendo click en Imprimir dentro de este enlace.
Lo único laborioso de esto es diseñar el ticket y adjuntar los productos.
Nota: lo he probado solamente con Chrome. Pero, independientemente del lugar, debemos quitar todos los márgenes y modificar un poco la escala para que el contenido ocupe el mayor espacio posible. Por ejemplo, así se ve sin ningún margen:
Imprimir ticket en impresora térmica usando Javascript
Diseñando el ticket
Vamos a comenzar definiendo un contenedor:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="ticket">
</div>
</body>
</html>
Agregando una tabla
Vamos a tabular todo con una tabla, para que quede alineado:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="ticket">
<table>
<thead>
<tr>
<th>CANT</th>
<th>PRODUCTO</th>
<th>$$</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.00</td>
<td>CHEETOS VERDES 80 G</td>
<td>$8.50</td>
</tr>
<tr>
<td>2.00</td>
<td>KINDER DELICE</td>
<td>$10.00</td>
</tr>
<tr>
<td>1.00</td>
<td>COCA COLA 600 ML</td>
<td>$10.00</td>
</tr>
<tr>
<td></td>
<td>TOTAL</td>
<td>$28.50</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Estilos
Ahora falta definir nuestros estilos:
* {
font-size: 12px;
font-family: 'Times New Roman';
}
td,
th,
tr,
table {
border-top: 1px solid black;
border-collapse: collapse;
}
td.producto,
th.producto {
width: 75px;
max-width: 75px;
}
td.cantidad,
th.cantidad {
width: 40px;
max-width: 40px;
word-break: break-all;
}
td.precio,
th.precio {
width: 40px;
max-width: 40px;
word-break: break-all;
}
.centrado {
text-align: center;
align-content: center;
}
.ticket {
width: 155px;
max-width: 155px;
}
img {
max-width: inherit;
width: inherit;
}
Hay que notar que también definimos algunas clases para centrar texto y algunos estilos para una imagen.
Esto es porque le pondremos un logo más adelante. Por el momento nuestro ticket se ve así.
Logo y pie
Finalmente vamos a agregar un “Gracias por su compra” o algo que nosotros queramos, así como un logo.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="ticket">
<img
src="https://yt3.ggpht.com/-3BKTe8YFlbA/AAAAAAAAAAI/AAAAAAAAAAA/ad0jqQ4IkGE/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"
alt="Logotipo">
<p class="centrado">TICKET DE VENTA<br>New New York<br>17/10/2017
02:22 a.m.</p>
<table>
<thead>
<tr>
<th>CANT</th>
<th>PRODUCTO</th>
<th>$$</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.00</td>
<td>CHEETOS VERDES 80 G</td>
<td>$8.50</td>
</tr>
<tr>
<td>2.00</td>
<td>KINDER DELICE</td>
<td>$10.00</td>
</tr>
<tr>
<td>1.00</td>
<td>COCA COLA 600 ML</td>
<td>$10.00</td>
</tr>
<tr>
<td></td>
<td>TOTAL</td>
<td>$28.50</td>
</tr>
</tbody>
</table>
<p class="centrado">¡GRACIAS POR SU COMPRA!<br>parzibyte.me</p>
</div>
</body>
</html>
Olvidé mencionar que tenemos que asignar las clases a las columnas y filas de las tablas, de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"> <script src="script.js"></script>
</head>
<body>
<div class="ticket">
<img
src="https://yt3.ggpht.com/-3BKTe8YFlbA/AAAAAAAAAAI/AAAAAAAAAAA/ad0jqQ4IkGE/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"
alt="Logotipo">
<p class="centrado">Parzibyte's blog
<br>New New York
<br>23/08/2017 08:22 a.m.</p>
<table>
<thead>
<tr>
<th class="cantidad">CANT</th>
<th class="producto">PRODUCTO</th>
<th class="precio">$$</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cantidad">1.00</td>
<td class="producto">CHEETOS VERDES 80 G</td>
<td class="precio">$8.50</td>
</tr>
<tr>
<td class="cantidad">2.00</td>
<td class="producto">KINDER DELICE</td>
<td class="precio">$10.00</td>
</tr>
<tr>
<td class="cantidad">1.00</td>
<td class="producto">COCA COLA 600 ML</td>
<td class="precio">$10.00</td>
</tr>
<tr>
<td class="cantidad"></td>
<td class="producto">TOTAL</td>
<td class="precio">$28.50</td>
</tr>
</tbody>
</table>
<p class="centrado">¡GRACIAS POR SU COMPRA!
<br>parzibyte.me</p>
</div>
</body>
</html>
Ahora nuestro ticket luce mejor, y puedes verlo aquí.
Imprimiendo
Lo único que falta es agregar una forma de imprimirlo. Sólo tenemos que llamar a window.print desde JS. Si deseamos que se imprima instantáneamente, lo haremos así:
window.print();
Imprimiendo al hacer click
Lo que recomiendo es que mejor pongamos un botón que lo imprima, porque si lo imprimimos al instante puede que no se hayan cargado las imágenes, o cosas así. De todos modos la elección queda en nosotros.
Vamos a agregar un botón:
<button class="oculto-impresion" onclick="imprimir()">Imprimir</button>
Y en el CSS vamos a ocultarlo, para que no salga al imprimir. Ya hice una entrada sobre esto aquí, por lo que no lo explicaré.
@media print {
.oculto-impresion,
.oculto-impresion * {
display: none !important;
}
}
Finalmente definimos la función en Javascript:
function imprimir() {
window.print();
}
Nuestro trabajo final se ve así.
Si hacemos click en el botón podemos ver que se imprime. Ahora simplemente tenemos que elegir la impresora y mandarlo.
Nota: puedes ocultar algunos elementos al imprimir, ya sea con CSS o con JavaScript y CSS.
Conclusión
Con esto podemos imprimir tickets y no sólo en la impresora térmica, también en cualquier otro dispositivo. Lo único de lo que debemos asegurarnos es de que nuestra impresora esté instalada correctamente.
Para dibujar los productos podemos hacerlo a mano, o con un framework como Vue, jQuery o AngularJS. Yo lo hice con javascript puro para hacerlo simple.
Si el ticket no funciona o no sale bien, podemos cambiar los pixeles y cualquier otra cosa. De esta manera podemos imprimir ticket en impresora térmica usando JavaScript
Recuerda: si quieres imprimir sin el diálogo de confirmación puede que quieras usar mi plugin.