1

mi consulta es la siguiente: estoy practicando como exportar archivos excel desde mi pagina pero quisiera hacer una validacion que si por ejemplo, al hacer click al boton para extraer el archivo, mientras que carga la peticion que el boton se deshabilite y cuando carga el archivo que el boton se vuelva a habilitar:

<input type="text" class="form-control text-center" id="Finicio"><br>
<input type="text" class="form-control text-center" id="Ffin"><br>
<button class="btn btn-success" id="Extraer"><i class="far fa-file-excel"></i> Exportar Excel</button>

<script>
$(document).on('click', '#Extraer', function(){
    if($('#Finicio').val() != '' && $('#Ffin').val() != ''){
      window.location='ExportarTxt?finicio='+$('#Finicio').val()+'&ffin='+$('#Ffin').val();
      //deshabilita boton
      $(this).attr('disabled', true);
     
    }else{
      swal("Fallo!", "Error en uno de los campos", "info");
    }
  });
</script>

Hay alguna forma de que esto se pueda?

1 respuesta 1

1

Una manera de hacerlo sería utilizando Ajax.

Te comparto un ejemplo:

function descargarArchivo() {

    console.log('Init');
    //Deshabilita el botón
    $("#btnFile").prop( "disabled", true );

    $.ajax({
        url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/172905/test.pdf',
        xhr: function() {
             var xhr = new XMLHttpRequest();
             xhr.onreadystatechange = function() {
                if (xhr.readyState == 2) {
                   if (xhr.status == 200) {
                      xhr.responseType = "blob";
                   } else {
                      xhr.responseType = "text";
                   }
                }
            };
            return xhr;
        },
        success: function(data) {
           //console.log(data); // Here is "blob" type
           var a = document.createElement('a');
           var url = window.URL.createObjectURL(data);
        
           a.href = url;
           a.download = 'myfile.pdf';
           document.body.append(a);
           a.click();
           a.remove();
           window.URL.revokeObjectURL(url);
        },
        error: function(xhr, textStatus, errorThrown) {
           // Here you are able now to access to the property "responseText"
           // as you have the type set to "text" instead of "blob".
           console.error(xhr.responseText);
        },
        complete: function() {
           console.log('Complete');
        
           alert('Hago esta pausa para que puedas comprobar que el botón se deshabilitó');
           //Habilita el botón
           $("#btnFile").prop( "disabled", false);
        }
    });
}
button:disabled {
  background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<button id="btnFile" onClick="descargarArchivo()">Descargar Archivo</button>

Nota: Para que el ejemplo que te compartí funcione, se necesita utilizar jQuery 2.2.0 en adelante

1
  • Muchas gracias! Me sirvio!
    – xelo
    Commented el 28 ago. 2020 a las 14:42

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.