Introducción

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:

Resultado final al Imprimir ticket en impresora térmica usando Javascript

Resultado final al Imprimir ticket en impresora térmica usando Javascript

Cuando terminemos, la interfaz se verá como aparece abajo. Puedes probarlo directamente haciendo click en Imprimir (dentro del frame)

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:

Vista previa al Imprimir ticket en impresora térmica usando Javascript

Vista previa al Imprimir ticket en impresora térmica usando Javascript

Imprimir ticket en impresora térmica usando Javascript

Diseñando el ticket

Vamos a comenzar definiendo un contenedor:

 

Agregando una tabla

Vamos a tabular todo con una tabla, para que quede alineado:

 

Estilos

Ahora falta definir nuestros estilos:

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.

Olvidé mencionar que tenemos que asignar las clases a las columnas y filas de las tablas, de la siguiente manera:

Ahora nuestro ticket luce mejor:

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í:

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:

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

Finalmente definimos la función en Javascript:

 

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.

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

No te vayas sin seguirme en Twitter, Facebook y GitHub, así me motivas a escribir más posts.
Igualmente te invito a suscribirte en la parte superior derecha escribiendo tu correo en el formulario.
Si tienes dudas déjalas en un comentario


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB. Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron. Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scripts La plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C. Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

25 Comments

David · enero 20, 2018 a las 8:42 pm

Imprime eso pero con un monton de espacio en blanco debajo del contenido…. como haces para que solo imprima lo que se pone y lo corte ahi nomas que termina el contenido?

    parzibyte · enero 24, 2018 a las 9:31 am

    Seguramente el espacio en blanco es debido a que intenta imprimir una imagen pero no puede, y deja todo el espacio vacío.

    RICARDO JONATHAN MENDOZA RODRIGUEZ · mayo 25, 2018 a las 10:29 am

    lo que te está pasando es por el tamaño que estás poniendo a tu configuración de impresora, a mi me sucede lo mismo y es por eso, pero eso no se puede al menos no se cómo se podría modificar el tamaño de la hoja desde javascript para que la impresora tome el tamaño de la hoja según el tamaó de lo que se está enviando en la lista, si alguien lo sabe que pase el tip

      parzibyte · mayo 25, 2018 a las 4:26 pm

      En Chrome (y supongo que en sus hermanos) existe la opción de cambiar los márgenes y la escala. Con eso se puede imprimir y aprovechar la mayor cantidad de papel

David · enero 20, 2018 a las 8:43 pm

Con php no se puede imprimir desde un hosting a una impresora que tengo en mi casa

    parzibyte · enero 23, 2018 a las 10:59 am

    Eso sí se puede. Configura tu módem para abrir el puerto 80 que es por defecto de Apache (si usas otro, utiliza ese puerto), asigna ese puerto a la ip de la computadora en donde estará la impresora. Luego, consigue tu dirección ip pública en un sitio como iplocationfinder.com y finalmente para imprimir desde cualquier lugar accede al archivo que imprime como si estuvieras en tu computadora. Es decir, si en tu computadora imprimes en localhost/imprimir.php entonces (suponiendo que tu ip es 66.33.22.55) para imprimir desde cualquier lugar podrías ir a 66.33.22.55/imprimir.php
    Un saludo

      German · julio 2, 2018 a las 5:47 pm

      Buenas tardes! Yo tengo una página web en PHP en un servidor web. Quería saber como puedo hacer para que mi cliente pueda acceder al sitio desde su casa e imprimir en su PC.

MCC · febrero 16, 2018 a las 10:48 pm

Amigo, buen post

Solo una pregunta, lo que busco es que mi ticket se imprima directamente solo con pasarle el nombre de la impresora, es decir, que no de la opcion de seleccionar la impresora.

Es posible eso?

Saludos

    parzibyte · febrero 17, 2018 a las 12:22 am

    Hola, es imposible debido a la seguridad de la web. Si eso fuera posible, imagina, un usuario malicioso podría mandar a tu impresora 1000 impresiones, sin que tú confirmes nada. Claro que no sería algo de seguridad, pero sería molesto. Lo que puedes hacer es activar algunas banderas dependiendo del navegador, imprimir con un lenguaje del lado del servidor como PHP o utilizar algo como Electron que permite imprimir silenciosamente desde Javascript.
    Un saludo.

Ruby · febrero 22, 2018 a las 8:41 am

hola mi estimado porfavor puedes detallar un poco mas sobre la imrpesion directa sin utilizar el boton
“”window.print desde JS”” no logro captar la idea muchas gracias de antemano

    parzibyte · febrero 22, 2018 a las 9:07 am

    Hola, qué tal.
    Si queremos hacerlo sin botón, es decir, que al abrir la página se imprima, puedes hacerlo en el evento onload, algo así:
    window.onload = function(){
    window.print();
    }

    De esta forma, tan pronto cargue la ventana se imprimirá automáticamente.

Jesus · abril 24, 2018 a las 8:42 pm

Que tal, imprimi la página que tu realizaste pero me sale con mucho margen, especialmente el margen inferior es muy grande te adjunto la imagen donde puedes verlo: https://imgur.com/a/0ZAG9Ku

De que forma puedo solucionarlo? Gracias!

    parzibyte · abril 24, 2018 a las 10:44 pm

    Hola. No sé cuál navegador utilizas, pero te recomiendo utilizar Chrome, pues trae más opciones de configuración. En caso de que lo estés utilizando, al momento de imprimir haz click en Más opciones. Ahí, en Márgenes elige Ninguno, y modifica si quieres la escala. La ventaja de Chrome es que permite modificar márgenes y da una vista previa.
    Prueba y a ver qué sale.

      jesus · mayo 11, 2018 a las 5:34 pm

      Buenas tardes amigo, gracias por tu aporte. Tengo una duda como hago para que la impresora corte la impresión?
      es una BIXOLON SRP-F312 solo que al terminar la ultima linea no corta la impresión!

        parzibyte · mayo 11, 2018 a las 6:08 pm

        Primero verifica que tu impresora tenga soporte para cortar, y que los controladores estén instalados correctamente.
        Después, en el panel de control de Windows (o el equivalente en el sistema operativo que utilices) configura la impresora para que corte siempre al terminar de imprimir.
        No siempre funciona, y esa es la desventaja de utilizar Javascript, pero puedes intentarlo.

FELIX · mayo 24, 2018 a las 3:20 pm

Hola. Es posible cambiar el tipo del tamaño de papel?. Que pasaría si el ticket es demasiado largo, sale en una sola?

    parzibyte · mayo 24, 2018 a las 3:21 pm

    Sí, el ticket sale en tamaño completo tanto a lo ancho como a lo largo, y mientras haya papel no pasa nada. De todos modos, puedes probar por ti mismo imprimiendo uno de prueba. Saludos

      FELIX · mayo 24, 2018 a las 3:28 pm

      Me sorprende la rapidez en responder.

      Te comento que mi ticket lo hice en php creando un archivo .txt e imprimia con php, pero eso era en un proyecto local, pero ahora necesito que varios clientes puedan hacer ventas, pero la opcion de imprimir por php ya no es factible.

      Aun sigo creando el ticket.txt pero ahora le doy lectura por javascript, toca probar como imprime por el browser.

      Mil gracias por responder.

        parzibyte · mayo 24, 2018 a las 4:21 pm

        Ya he escrito un post sobre cómo imprimirlo en Javascript del lado del cliente: https://parzibyte.me/blog/2017/10/17/imprimir-ticket-en-impresora-termica-usando-javascript/
        Prueba y a ver qué tal. Saludos.

          Henry · octubre 19, 2018 a las 6:46 pm

          Hola parzibyte, que buen post… yo tengo el siguiente dilema… instale un servidor xampp en el cual accedo local mente: localhost/ejemplo/index.html
          tengo un formulario que captura información y a la vez imprime en una impresora térmica de tickets como explicas en el post anterior.

          Puedo acceder desde otro equipo en la red y capturar la información con el formulario //ip-servidorlocal/ejemplo/index.html ; mas no se como imprimir teniendo la impresora de tickets instalada en otro equipo.. desde el servidor funciona correctamente. de antemano mil gracias…

          parzibyte · octubre 19, 2018 a las 10:19 pm

          Gracias por tus comentarios 🙂
          Respondiendo a tu pregunta: la impresora debe estar conectada físicamente al servidor en donde quieres imprimir si quieres imprimir localmente. Si no tienes la posibilidad de instalar XAMPP en la PC que me dices, intenta usar el método de JavaScript

RICARDO JONATHAN MENDOZA RODRIGUEZ · mayo 25, 2018 a las 10:22 am

me quedó muy bien, solo le hice algunos cambios para que el botón aparezca cuando la orden está agregada a la base de datos, la tabla se va llenando cuando vas agregando productos pero está oculta con un hide() de jquery, te muestro algunas imágenes
este es mi botón:
Ticket
que solo aparece cuando doy agregar la orden o el carrito

este es el div donde se va llenando el ticket según se vallan agregando productos al carrito, pero el usuario nunca lo vé

Bajo Tierra
#1006

CANT
PRODUCTO
$$

¡GRACIAS POR SU COMPRA!
http://www.bajotierra.com

y esta es la función en jquery que manda la impresión

/* PRINT */
$(“#btn_print_ticket”).on(“click”,function(){
imprimir(“ticket”);
});
function imprimir(id) {
var data = document.getElementById(id).innerHTML;
var myWindow = window.open(”, ‘ticket’, ‘height=100,width=600’);
myWindow.document.write(‘Ticket Bajo Tierra’);
/*optional stylesheet*/
myWindow.document.write(“”);
myWindow.document.write(”);
// myWindow.document.write(“” + site_url + “assets/css/ticket.css”);
myWindow.document.write(data);
myWindow.document.write(”);
myWindow.document.close(); // necessary for IE >= 10

myWindow.onload = function () { // necessary if the div contain images

myWindow.focus(); // necessary for IE >= 10
myWindow.print();
myWindow.close();
};
}
/* END PRINT */

David Yepes · octubre 26, 2018 a las 11:23 am

buen dia

¿Funcionara con cualquier impresora térmica o hay algunas en especial?? ¿Cuál impresora usa usted ?

muchas gracias

    parzibyte · octubre 26, 2018 a las 12:07 pm

    Hola, funciona con la mayoría; pues todas hablan el “lenguaje” ESC/POS. Personalmente uso las Xprinter, aunque con las Epson y otros modelos funciona a la perfección

Deja un comentario

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: