3

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!") }
  });
});
6
  • yo uso Jquery.print, el plugin 'mete' el contenido del área a imprimir dentro de un iframe si se le establece a true en las opciones de configuración; es posible te sirva, realmente no lo empleo en impresiones de tickets, prueba es posible te sirva.
    – Francisco
    Commented el 25 oct. 2021 a las 14:27
  • Hola gracias @Francisco probare esta noche haber si hay suerte! es mejor hacerlo de otro modo? estoy quivocado haciendolo así?
    – Miguel
    Commented el 25 oct. 2021 a las 14:43
  • tu pregunta debe tener lo siguiente: una explicacion de donde cojes el contenido de lo que quieres imprimir. un ejemplo de lo que haces con esos datos, para la version A: donde coje los estilos y B: donde no coje los estilo pero si hace el corte; y el ejemplo/link de lo que investigaste que es lo que estas usando como tutorial para lograr lo que quieres....
    – user46896
    Commented el 31 oct. 2021 a las 19:38
  • tambien agrega esto no dejaste el link: window.open(' ', 'popimpr'); en la respuesta de un ajax no lo permiten los navegadores.
    – user46896
    Commented el 31 oct. 2021 a las 19:40
  • tampoco agreaste el cuerpo del metodo ajax que estas usando ...
    – user46896
    Commented el 31 oct. 2021 a las 19:41

1 respuesta 1

2
+50

Los navegadores bloquean el uso de window.open(...) cuando este no viene de una acción directa del usuario. Es por esto que tu impresión no funciona dentro del success de tu $.ajax(...), ya que eso puede terminar ejecutándose luego de que $('.ejecutarEfectivo').on('click', ...) haya terminado su ejecución (debido a la asincronía en javascript).

Para solucionarlo debes usar el parámetro async: false dentro de tu $.ajax(...) cosa que se ejecute sincrónicamente.

$('.ejecutarEfectivo').on('click', function(e) {
    var zona_id = document.getElementById('zonas').value;
    var pago = $(this).attr("data-id")
    let url = '/pago-efectivo';
    let success = false // se define un booleano para la sincronía
    $.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,
      },
      async: false, // Esto hace que se ejecute sincrónicamente
      success: function (result){
        // Esto se ejecuta antes de pasar a la siguiente línea
        success = true
      }
    });
    if(success){
        $('#modalEfectivo').modal("hide");

        // se agrega la impresión
        var ficha = document.getElementById('ticketIMP');
        var ventimp = window.open(' ', 'popimpr');
        ventimp.document.write(ficha.innerHTML);
        ventimp.document.close();
        ventimp.print( );
        ventimp.close();
        
        total = 0;
        carrito= [];
                
        $('#elPedido').empty();
        estado();
        actulizaTotal();
        $("#formEfectivo")[0].reset();
        window.location.hash = '';
    } else alert("ERROR!")
});

Este funcionamiento sincrónico de $.ajax(...) trae sus problemas, ya que el navegador no responderá durante la ejecución de la petición, además de no ser compatible con las peticiones a otros dominios (Cross-domain requests) ni tampoco con dataType: "jsonp" (que según veo, ninguno es tu caso).

Espero te sirva!

2
  • 1
    Hola @Japsz lo solucione de otro modo distinto y con otra programación distinta, pero he probado la tuya y funciona de manera correcta tal como lo queria hacer yo, por eso la marco como correcta. Gracias por tu ayuda!
    – Miguel
    Commented el 7 nov. 2021 a las 16:30
  • @Miguel Gracias a ti! Siempre es un gusto ayudar:D
    – Japsz
    Commented el 7 nov. 2021 a las 18:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.