El Plugin se ejecuta desde el sistema operativo Windows, este plugin o proceso es el encargado de comunicar el navegador WEB con las impresoras instaladas en el ordenador, por medio de peticiones http.
Una vez entendido como es la comunicación paso a explicar cómo se realiza la integración.
Para empezar, tenemos que tener el plugin ya ejecutando en el Ordenador.
Después desde algún proyecto web en el que estemos trabajando o algún proyecto de prueba agregaremos una muy pequeña librería de JavaScript que se comunicara con el plugin.
Descargar el plugin Aqui
https://mega.nz/file/ne4izbZa#mzZwvqsk_uOBl8K5Z-uhQYlOE9dPzqiBkv1NXBPGFbY
Ejemplo de USO con la libreria https://github.com/abrazasoft/libreriaimpresora
Por ejemplo, supongamos que tenemos nuestro proyecto de la siguiente forma.
-Index.html
-Impresora_abrazasoft.js
Dentro de nuestro index.html importaremos el script (Impresora_abrazasoft.js) de la siguiente manera. (también Agregue JQUERY pero no es necesario para el funcionamiento)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="Impresora_abrazasoft.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
Una vez agregado nuestro Script empezaremos a hacer uso de él. Primero agregaremos un par de botones uno es listar impresoras, y el segundo es imprimir. Así mismo usaremos onclick para llamar a la función que le corresponda.
<div>
<button onclick="mostrar_impresoras()">Mostrar Impresoras</button><br>
<button onclick="imprimir()">Imprimir</button>
</div>Agregamos un poco de JavaScript dentro de nuestro index.html y allí creamos nuestras funciones.
Creamos primero la función mostrar_impresoras().
<script>
function mostrar_impresoras(){
connetor_plugin.obtenerImpresoras()
.then(impresoras => {
console.log(impresoras)
});
}
</script>
Recordemos que como ya tuvimos importado nuestra librería impresora_abrazasoft.js
Podemos utilizar la función obtenerImpresoras de la clase connector_plugin. Una vez que realizar la petición agregue un Console.log para que las impresoras se listes en la consola del navegador.
Ahora si todo está funcionando correctamente, y nuestro plugin se está ejecutando en Windows, esto debería funcionar, y verse de esta manera al hacer clic en el botón de mostrar impresoras.
Bien hasta aquí todo va correctamente. Obtener la lista de impresora nos sirve para guardar una impresora predeterminada desde el navegador web y cada que mandemos a imprimir mandemos nuestro ticket a la impresora correcta.
Ahora crearemos la función imprimir. Para la cual necesitaremos crear una función asíncrona en JavaScript se utiliza async await.
async function imprimir(){
}
Para este ejemplo definiremos el nombre de impresora y un api_key (si no se cuenta con uno puede poner un numero cualquiera por ejemplo 123).
async function imprimir(){
let nombreImpresora = "BIXOLON";
let api_key = "123"
}
Después declararemos conector el cual nos ayudara a darle forma a nuestro ticket. Y asi se tendría que ver.
async function imprimir(){
let nombreImpresora = "BIXOLON";
let api_key = "123"
const conector = new ConectorPlugin()
}
Después iremos agregando los datos de la impresión de la siguiente manera, por ejemplo, si quiero un tamaño de letra usaremos fontsize, si quiero un lineado a la derecha izquiera o centro usaremos textaling, etc.
Les agrego un ejemplo de Ticket de venta.
conector.fontsize("2")
conector.textaling("center")
conector.text("Ferreteria Angel")
conector.fontsize("1")
conector.text("Monte Everest 4578 Las Cumbres Tijuana")
conector.text("PERYCJ711219")
conector.feed("3")
conector.textaling("left")
conector.text("Fecha: Miercoles 8 de Septiembre 2021 13:50")
conector.text("Cant. Descripcion Importe")
conector.text("-------------------------------------------------------------------")
conector.text("1- Barrote 2x4x8 $110")
conector.text("3- Esquinero Vinil $165")
conector.feed("1")
conector.fontsize("2")
conector.textaling("center")
conector.text("Total: $275")
conector.qr("https://blog.abrazasoft.com/2021/09/26/plugin-para-impresora-termica-en-javascript")
conector.feed("5")
conector.cut("0")
Una vez que terminamos de dar formato al Ticket en nuestro conector, declararemos una respuesta que a su vez ejecutará la orden de imprimir utilizaremos await para esperar la respuesta del plugin sobre la impresión. Después validamos la respuesta.
const resp = await conector.imprimir(nombreImpresora, api_key);
if (res === true) {
} else {
console.log("Problema al imprimir: "+res
}
La función de imprimir completa quedaría algo asi:
async function imprimir(){
let nombreImpresora = "BIXOLON";
let api_key = "123"
const conector = new connetor_plugin()
conector.fontsize("2")
conector.textaling("center")
conector.text("Ferreteria Angel")
conector.fontsize("1")
conector.text("Monte Everest 4578 Las Cumbres Tijuana")
conector.text("PECJ711218EZ9")
conector.feed("3")
conector.textaling("left")
conector.text("Fecha: Miercoles 8 de Septiembre 2021 13:50")
conector.text("Cant. Descripcion Importe")
conector.text("----------------------------------------------------")
conector.text("1- Barrote 2x4x8 $110")
conector.text("3- Esquinero Vinil $165")
conector.feed("1")
conector.fontsize("2")
conector.textaling("center")
conector.text("Total: $275")
conector.qr("https://abrazasoft.com")
conector.feed("5")
conector.cut("0")
const resp = await conector.imprimir(nombreImpresora, api_key);
if (res === true) {
} else {
console.log("Problema al imprimir: "+res)
}
}
Como podemos observar se agregan textos, se puede cambiar el tamaño de letra, la alineación, feed, podemos agregar códigos QR, podemos hacer que la impresora corte el papel etc. Listo las funciones que tiene.
- text
- qr
- fontsize
- feed
- textaling
- barcode_ean13
- barcode_ean13
- barcode_128
- img_url
- cut
- pdf417
