En este post te voy a enseñar a imprimir en una impresora térmica usando JavaScript del lado del cliente, evitando confirmación por parte del usuario, gracias a un plugin.

Ticket impreso con plugin directamente desde JavaScript

English version here.

Demostración en YouTube

¿Quieres ver el plugin en funcionamiento? he grabado el siguiente vídeo en donde se muestra cómo descargar el plugin, configurar la impresora, establecerla y usar los ejemplos.

También resuelvo algunas preguntas comunes. Por favor, míralo:

Paso 1: descargar plugin

Ve a la documentación oficial, instala tu impresora y descarga el plugin.

Tal vez tu navegador se queje del mismo, no te preocupes, te aseguro que es totalmente seguro y no es malintencionado.

Cuando acabes de descargar el plugin, ejecútalo, dale permiso de pasar a través del firewall y NO lo cierres.

Paso 2: incluir librería de JavaScript

En tu proyecto de JavaScript incluye el archivo llamado Impresora.js, ya sea descargándolo desde GitHub o desde GitHub pages.

Al incluir la librería tendrás dos clases (lo digo por si tienes unas clases que ya llevan ese nombre), una es Impresora, otra es OperacionTicket.

Paso 3: configurar impresora predeterminada

Por favor ve a este ejemplo, selecciona una impresora de la lista (una que sea térmica obviamente) y haz click en Establecer como predeterminada.

Si todo va bien, debe aparecer un ticket indicando que la impresora es compatible.

Relacionado:  Rutas en Laravel parte 2: prefijos, fallback, límite de tasa y formularios

Nota: aquí también puedes usar el método setImpresora con el nombre de la impresora, preferentemente obtenida de la lista que obtienes al invocar a getImpresoras.

Recuerda haberla configurado y compartido como lo indico en la documentación.

Paso 4: hola mundo

Ahora que el plugin está instalado y que has incluido la librería, puedes crear una nueva instancia de la clase Impresora así:

let impresora = new Impresora();

El constructor de la clase acepta una URL distinta a la que es por defecto (por si en el futuro cambio el puerto, por ejemplo)

No es necesario que indiques la ruta, como lo dije, se toma la que es por defecto y solo indico esto por si en el futuro permito la posibilidad de cambiarlo.

Después simplemente escribe algo de texto y termina la impresión. El código completo es el siguiente:

La función end regresa una promesa que al resolverse indica el resultado de hacer la impresión.

Ese código debería imprimir tu ticket; si no se puede, por favor mira los ejemplos que están en la documentación.

El código de los ejemplos está en GitHub.

Más sobre esta librería

A continuación te presento algunos fragmentos de código, por favor recuerda que son tomados directamente de los ejemplos y que debes entenderlos antes de usarlos (si copias y pegas, no funcionará)

Recomiendo que leas un poco sobre los detalles técnicos o veas la documentación oficial.

Por cierto, en todos los ejemplos se usa fetch.

Establecer impresora predeterminada

Si quieres establecer la impresora predeterminada a través de código, puedes hacerlo.

Veamos el fragmento de código que existe en el ejemplo:

Relacionado:  Sistema gestor de enlaces y acortadores

Solo tienes que hacer una petición PUT a la ruta del servidor /impresora (por ejemplo localhost:8080/impresora), enviando como JSON el nombre de la impresora.

Si el nombre de la impresora es correcto, el mismo se guardará y los siguientes tickets que imprimas se imprimirán en esa impresora (es decir, este paso solo lo debes hacer una vez).

La respuesta del servidor será una cadena; en caso de que la impresora sea compatible, se regresa el mismo nombre de la impresora y se imprimirá un ticket físico.

Obtener lista de impresoras

Igualmente puedes hacerlo a través de una petición GET /impresoras como en el siguiente fragmento de código en los ejemplos:

Eso devolverá un arreglo de las impresoras compartidas; así puedes mostrarle al usuario las impresoras que puede elegir.

Obtener impresora predeterminada

Finalmente, si quieres saber cuál impresora es la predeterminada, haz una petición GET a /impresora como en el fragmento:

Imprimir

Puedes hacer tu propia librería, simplemente mira los detalles técnicos; al final debes hacer una petición POST a /imprimir, con un arreglo como datos.

Preguntas frecuentes

Por favor, antes de dejar un comentario, lee las preguntas frecuentes.

Ejecutar plugin al inicio de Windows

Buenas noticias, he creado un post para indicar cómo ejecutar el plugin al inicio de Windows. Míralo aquí.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Relacionado:  Formatear dinero en PHP

Únete a otros 571 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

40 Comments

Victor · abril 25, 2020 a las 12:12 pm

Hola excelente trabajo, una pregunta, el plugin los tines compilado para linux

Victor · abril 25, 2020 a las 1:51 am

Hola Amigo, excelente trabajo, por casualidad tienes el plugin compilado para linux???, Tengo que montarlo en linux

    parzibyte · abril 25, 2020 a las 12:36 pm

    Hola. Por el momento solo para Windows; si quieres una versión personalizada puedes hablarme de manera privada.
    Saludos 🙂

PEDRO DE LEON RODAS · marzo 6, 2020 a las 7:48 pm

Buen dia.
Que precio tiene tu plugin ?
El pago se hace por Paypal ?

Gracias

Crystien Guzman · enero 27, 2020 a las 5:24 pm

Buenas Noches amigo Parzibyte, primero que nada debo agradecer toto el aporte que has hecho. pero requiero de tu ayuda para solucionar un problema que ya me esta dando dolor de cabeza. Me esta generando un error al momento de mandar a imprimir mientras que cuando le doy a establecer como predeterminado si se ejecuta exitosamente.. Podrias ayudame por favor

    parzibyte · enero 27, 2020 a las 7:21 pm

    Hola, gracias por sus comentarios. Le genera algún error o simplemente no imprime? debería refrescar la página e intentar de nuevo; o probar con el método imprimirEnImpresora que le permite indicar el nombre de la misma.
    Saludos 🙂

    Crystien Guzman · enero 27, 2020 a las 7:27 pm

    Ya probe varios metodos de los que indica y no se que pasa, el error que genera es incluso desde la pagina que coloca como test (27/1/2020 21:20:03 Al imprimir: Error en el servidor: ) ese es el error…. pero cuando coloco la impresora como predeterminada desde el boton si me genera una informacion. Por favor ayuda.

    Crystien Guzman · enero 27, 2020 a las 7:37 pm

    27/1/2020 21:20:03 Al imprimir: Error en el servidor: ese es el error que me dio amigo.! ya no se que probar para que envie la impresion. Sin embargo con el metodo de impresion desde PHP si me funciono solo que al subirlo a un servidor (nube cpanel) me da error al imprimir tambien entonces estoy en ese problema. Sera que puedes ayudarme amigo por favor

    parzibyte · enero 27, 2020 a las 8:02 pm

    Ya veo… podría mostrarme el código que usa? o es solo en la demostración?

Jorge · enero 24, 2020 a las 7:38 pm

¿Cómo puedo imprimir desde PHP?

¿Puedo imprimir un PDF?

    parzibyte · enero 24, 2020 a las 8:09 pm

    Solo se puede imprimir desde JavaScript, pues ese es el propósito del plugin. Sobre el PDF, no, no es posible.
    Saludos 🙂

Omar Gerardo · enero 13, 2020 a las 4:27 pm

Pregunta se puede imprimir un pequeño logo una imagen jpg con el plugin

    parzibyte · enero 13, 2020 a las 5:27 pm

    Por el momento solo se pueden imprimir códigos QR, en el futuro implementaré la impresión de imágenes.
    Saludos 🙂

giancarlo melgarejo · diciembre 30, 2019 a las 4:12 pm

Buenas tardes,

Quisiera mas información sobre la versión premium, a que se refiere que solo es para 3 dominios ? , eso quiere decir que una ves que establezca los dominios ya no los podre cambiar ?, por ejemplo si yo trabajo con un dominio y a futuro el dominio lo cambio ya no podre hacer eso ? , la licencia es permanente o tengo que pagar algo al año ?

    parzibyte · diciembre 30, 2019 a las 4:16 pm

    Hola. Actualmente es un pago único; los 3 dominios se pueden cambiar.
    Saludos

llanera_sol · noviembre 29, 2019 a las 4:32 pm

Hola, alguna idea para imprimir cupones uno tras otro?; es decir que si genero 3 cupones, que la impresora haga el corte por cupon, a mi me sale los 3 cupones en uno(impresora epson t88v)

    parzibyte · noviembre 29, 2019 a las 11:49 pm

    Hola, buen día. Lo que dices sería algo así:
    // iniciar impresora y todo eso. Después:
    impresora.write(“Cupón 1”);
    impresora.cut();
    impresora.cutPartial();
    impresora.write(“Cupón 2”);
    impresora.cut();
    impresora.cutPartial();
    impresora.write(“Cupón 3”);
    impresora.cut();
    impresora.cutPartial();
    impresora.imprimirEnImpresora(“Tu impresora”);

    Ten en cuenta que la impresora debe poder cortar el papel. Saludos

ervin · noviembre 27, 2019 a las 4:16 pm

con unas cuantas dudas, espero se pueda resolver:
1- porque al inicio me imprime una “@”.
2- cuando finaliza la impresión corta y me desperdicia una porcion de papel.
3- como puedo agregar un marco a la impresion.
4- como puedo agregar una codigo de barra.

de antemano muchas gracias, y buen aporte del plugin

    parzibyte · noviembre 27, 2019 a las 5:16 pm

    Hola. Respondo tus dudas:
    1 – No lo sé, no me ha pasado a mí y a ninguno de mis clientes. Supongo que es el modelo de tu impresora
    2 – Puede que sea el encabezado y pie, o cuestión de modificar el plugin para evitar el corte
    3 – No es posible por el momento
    4 – No es posible por el momento pero en un futuro lo será
    Saludos 🙂

Carlos · noviembre 16, 2019 a las 7:43 pm

Wey… te rifaste! Incluso funciona con impresoras “normales”! En los próximos días haré la compra de la versión Premium! Gracias!

    parzibyte · noviembre 16, 2019 a las 9:50 pm

    Me parece bien. Saludos 🙂

Elias · octubre 1, 2019 a las 5:11 pm

Gracias Amigo
Como hago para quitar el encabezado y pie de pagina
o talvez podrias poner mas pequeñito es muy grande

luis · octubre 1, 2019 a las 4:17 pm

Amigo tiene plugin para 32 bits solo me funciona para 64 bits

Pablo · octubre 1, 2019 a las 3:37 pm

Amigo al momento de presionar el boton impresora predeterminada me da el siguiente error:
No se pudo establecer la impresora con el nombre \\192.168.2.2\Star SP700 TearBar (SP712)

pablo · septiembre 30, 2019 a las 2:08 pm

9/30/2019, 2:07:55 PM Al imprimir: Error en el servidor: sql: no rows in result set

Cesar · septiembre 30, 2019 a las 1:40 pm

Hola disculpa alguna solucion para una impresorade etiquetas zebra 420t

    parzibyte · septiembre 30, 2019 a las 4:10 pm

    Hola; las impresoras de etiquetas son muy distintas a las impresoras térmicas. Por suerte, las mismas vienen (la mayoría de veces) acompañadas con un software de impresión de etiquetas así que solo basta con descargarlo, y listo (tal vez requieran el serial o el comprobante de compra)
    Saludos

Orlando · septiembre 25, 2019 a las 9:22 am

gracias por el aporte, una pregunta no es necesario llamar a la libreria ?? el archivo Imprimir.js esta en un carpeta que es JS no abra problemas sobre la ruta??

    parzibyte · septiembre 25, 2019 a las 9:36 am

    Hola, no importa la ubicación de Impresora.js siempre y cuando la cargues correctamente. Podría estar en una carpeta como js/a/b/c/Impresora.js pero en tu HTML debes incluirlo igual con la misma ruta
    Saludos

    Orlando · septiembre 26, 2019 a las 7:47 pm

    realize los pasos como mencionas, pero al momento de hacer imprimir me sale en la pantalla el código de imprimir.js donde menciona HOLA MUNDO , donde podría ser error xfavor no manejo muy bien el javascript.
    El envió que hago es mediante un <a href=’js/imprimir.js’>
    Y gracias de antemano por tiempo

    parzibyte · septiembre 26, 2019 a las 8:12 pm

    Hola. Si se fija en los ejemplos, y en el código de los ejemplos, verá que debe incluir el script con la etiqueta <script src=”js/imprimir.js”>
    Por favor revise los ejemplos, verá que ahí está el código funcionando perfectamente.
    Recuerde que también puede contratarme para que yo haga el trabajo: https://parzibyte.me/blog/contrataciones-ayuda/
    Saludos

Rodrigo · septiembre 25, 2019 a las 8:54 am

una pregunta para que sirve .then(valor => {
loguear(“Al imprimir: ” + valor);
});

Gustavo · septiembre 21, 2019 a las 5:04 pm

Hola que tal, estoy probando tu método, pero en tu página nunca logra establecer la impresora, a pesar de estar corriendo el servidor y ya permitirle todos los permisos de firewall, aun asi intente darle imprimir y me manda este error Al imprimir: Error en el servidor: sql: no rows in result set

    parzibyte · septiembre 21, 2019 a las 7:20 pm

    Hola, buen día. El error es porque no se ha establecido la impresora, por lo tanto no puede leer datos (no rows) de la BD, porque no se han guardado.
    El nombre de la impresora solamente se guarda si la impresión es exitosa, pero en tu caso parece que no se puede establecer la impresora que intentas, tal vez no la has compartido

Deja un comentario

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

A %d blogueros les gusta esto: