3

Tengo el siguiente evento click, que al exportar un pdf, se descarga, pero quería colocar una animación gif cargando mientras se genera. He tratado de hacerlo así:

 $("#export_pdf").click(function (e) {
        e.preventDefault();
        $("#ajax_loader").css("display", "");
        var formato = "PDF";
        var url = "/Obras/Export?format=" + formato + "&nombreObra=" + $('#nombre_obra').val();
        window.location.href = url;
        $("#ajax_loader").hide();
    });

Pero no se alcanza a mostrar la imagen del div cargando ajax_loader. Estoy exportando un documento en PDF, usando MVC C# y jquery, por lo que no me funcioan usar ajax, así que uso window.location.href.

He intentado de hacerlo, pero no me da resultado. Si alguien tiene alguna idea, se lo agradecería bastante.

1 respuesta 1

1

Depende mucho de la instantaneidad que tenga esa generación. Podrías generar el link de descarga dinámicamente y luego de un segundo pincharlo programáticamente, momento en que ocultas el "loading".

En chrome no va a funcionar porque el atributo download es ignorado, pero lo siguiente podría funcionar en Firefox dado que pidas el PDF al mismo origen desde donde ejecutas el script. En el snippet de más abajo no va a funcionan nunca porque estos snippets se ejecutan en un sandbox que impide el uso de esta clase de recursos externos.

Voy a dejar esta respuesta como experimento:

jQuery(document).ready(function() {

    jQuery('#descargar').on('click', function() {
     
     jQuery('#loading').addClass('visible');
     
     var a = document.createElement('a');
     a.innerText='descargando';
		 a.target = '_blank';
		 a.download = 'mipdf.pdf';
     a.href="https://www.antennahouse.com/XSLsample/pdf/sample-link_1.pdf";
      
     document.getElementById('caja').appendChild(a);
          
     
      window.setTimeout(function() {
       a.click();
       jQuery('#loading').removeClass('visible');
     },1500);
   });

});
#caja {
height: 150px;
width:150px;
}
#descargar {
 padding:3px;
 border: 1px solid;
 width: 120px;
 cursor: pointer;
}

#milink {
  display:block;
  
}

#loading {
  opacity:0;
  height:100px;
  width:130px;
  transition: opacity: 1s;

}

#loading.visible {
  opacity: 1;
  transition: opacity 1s;
}
<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>
  
  <div id="caja">
  <button id="descargar">Descarga el PDF</button>
  <img src="https://okcinjurylaw.com/assets/themes/okcinjurylaw/images/loading.gif" id="loading" />
  </div>

Lo más probable es que firefox en realidad te lleve al visor de PDF del documento que querías descargar.

Pero ya que el documento se sirve desde el backend, en el mismo backend podrías ponerle un header que obligue a tratarlo como attachment para descarga.

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.