Buenas noches estoy todo el día haciendo pruebas y no consigo que me funcione bien esto. En mi success
de mi ajax quiero que me imprima un ticket en una impresora térmica, consigo que imprima pero mi problema más grande por el momento es que siempre hace un alto minimo de ticket, es decir parece que lo hace por páginas en lugar del alto del div que contiene la información. Lo que necesito es que cuando termina el texto, termine de imprimir.
Buscando por internet encontre esto
<div id="seleccion">Este texto es lo que se imprimirá cuando se pulse el enlace.</div>
<a href="javascript:imprSelec('seleccion')" >Imprimir texto</a>
<script language="Javascript">
function imprSelec(nombre) {
var ficha = document.getElementById(nombre);
var ventimp = window.open(' ', 'popimpr');
ventimp.document.write( ficha.innerHTML );
ventimp.document.close();
ventimp.print( );
ventimp.close();
}
</script>
Si lo hago tal cual indica ahí, en el momento que termina el texto corta el papel de la impresora térmica.
Bien pero yo no lo quiero en un botón, yo quiero que cuando llega mi respuesta del AJAX, imprima el ticket. Bien si hago del siguiente modo en mi success:
var ficha = document.getElementById('ticketIMP');
var ventimp = window.open(' ', 'popimpr');
ventimp.document.write(ficha.innerHTML);
ventimp.document.close();
ventimp.print( );
ventimp.close();
Parece que la linea var ventimp = window.open(' ', 'popimpr');
no es compatible con las respuestas de ajax en los navegadores. Entonces si lo pongo cuando hago click al botón de finalizar pedido antes del ajax, si que me imprime el ticket pero no consigo que me coja estilos, ni tan siquiera centrar la imagen.
Probé de otra forma, que en este caso si me coge los estilos pero en cambio no corta el papel cuando se acaba el texto, siempre hace el mismo alto, como si estuviese haciendo la impresión por paginas.
var printContents = document.getElementById("ticketIMP").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
De momento como no consigo hacerlo funcionar imprimo ticketIMP
que es un html simple, una vez consiga que funcione montare el ticket con una variable que me trae los productos en el carrito.
<div class="ticket ticketIMP text-center contenidoOculto col-12" id="ticketIMP" style="align-content: center; text-align: center; width: 200px;">
<img src="http://ruta/images/logo.png" style="width:140px;";
</div>
Mi función para cuando apreto a finalizar pedido
$('.ejecutarEfectivo').on('click', function(e) {
var zona_id = document.getElementById('zonas').value;
var pago = $(this).attr("data-id")
let url = '/pago-efectivo';
$.ajax({
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
type: "GET",
url: url,
data: {
'carrito' : carrito,
'total' : total,
'zona_id' : zona_id,
'pago' : pago,
},
success: function (result){
$('#modalEfectivo').modal("hide");
//Aquí es donde en un futuro quiero imprimir el contenido de la variable carrito, de momento aquí es donde ejecuto las pruebas de arriba para que me imprima el contenido de `ticketIMP`
total = 0;
carrito= [];
$('#elPedido').empty();
estado();
actulizaTotal();
$("#formEfectivo")[0].reset();
window.location.hash = '';
}
},
error: function(e) { alert("Error!") }
});
});