jQuery PDF Download - bitte warten und Erfolgsmeldungen

Question

ich einen PHP-Skript, das eine $_POST Variable akzeptiert eine PDF-Datei herunterladen auslösen, und das Skript gesetzt ist bereits die Datei als Download zurückzukehren eher zu laden als die Datei im Browser oder speichern Sie die Datei auf dem Server.

Ich kann diese Datei herunterladen, mit einem einfachen Formular, überhaupt keine Probleme, aber da es etwa 5 bis 10 Sekunden Verarbeitungszeit gibt, entschied ich mich zu versuchen und haben jQuery behandeln das click Ereignis, so dass ich eine anzeigen konnte "Bitte warten" -Meldung, während das Skript verarbeitet wird und eine Meldung "Dateidownload wurde gestartet", wenn die Verarbeitung abgeschlossen ist, was, wie sich herausstellt, viel schwieriger ist, als ich es mir erhofft hatte.

Ich kann die click erhalten, um die "Bitte warten" Nachricht anzuzeigen, aber kann dann nicht feststellen, wann die Seite verarbeitet wurde, so dass die Nachricht "Bitte warten" auch nach dem Herunterladen der PDF-Datei erhalten bleibt.

Wenn ich jQuery verwenden, um die click Ereignis und POST die Daten mit ajax zu handhaben, preventDefault verwenden, erhalte ich die richtige „Wait“ und „Download Started“ Nachrichten, aber das Herunterladen der Datei an den Browser nicht zurückkehren kann.

Ich habe beide Methoden temporär integriert, indem ich nicht preventDefault benutze, was dem Benutzer das genaue Verhalten ist, das ich will: es zeigt "Bitte warten" bis der Dateidownload startet und dann "Dateidownload gestartet" wenn die Datei beginnt tatsächlich zu downloaden. Aber, wie ich sicher bin, liegt auf der Hand, dies zu veröffentlichen die Daten tatsächlich zweimal: einmal mit dem form und das andere mit jQuery, und da sie die gleiche Menge an Zeit, um die Anforderung die Funktionalität Ich möchte erreicht abzuschließen.

Gibt es eine Möglichkeit erreiche, was ich richtig will?

HTML-Formular ($filename ist aus dem Datenbank-Aufruf)

<form method="post" action="pdf/index.php" name="pdfForm" id="pdfForm"> 
<button type="submit" class="downloadButton" 
name="filename" value="'.$filename.'">'.$filename.'</button> 
</form> 

"Arbeiten" jQuery (es gibt eine gewisse Redundanz von anderen Versionen habe ich versucht, sorry)

<script> 
    $(document).ready(function() { 
    $('.downloadButton').on('click', function(e) { 
     //e.preventDefault(); // File will not download if this is not commented out 
     var $filename = $(this).val(); 
     var $thisBox = $(this); 
     var $url = $('#pdfForm').attr('action'); 
     $thisBox.text("Please Wait"); 
     url = $url; 
     return $.post(url, {filename: $filename}) 
     .done(function(data) { 
      $thisBox.text("File Download has started"); 
      // This won't happen unless e.preventDefault() is excluded 
     }); 

    }); 
    }); 
</script> 

Ich habe unzählige andere Fragen auf der Suche nach einer Lösung durchforstet, aber nichts gefunden, was für mich funktioniert. Am nächsten kam ich mit ajaxblob, aber ich brauche Unterstützung für ältere Browser und die Ergebnisse waren sowieso nicht großartig.

Jede Hilfe wäre sehr dankbar, hoffentlich kann ich nur fehlt etwas offensichtlich und jetzt nicht sehen, daß es so lange es sah zu haben.

Answer 1

hatte ich das gleiche Problem für ein Wort und ich die Lösung gefunden. Vielleicht solltest du für ein pdf vielleicht nicht modifizieren.

//When click... 
//For browers doesn't support the download attribut.... 
//The only issue is to past by a popup with the GET method 
a = document.createElement('a'); 
if(typeof a.download =="undefined") { 
    win = window.open('your_url?data=data','_blank','height=200,width=200,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes'); 
    var loop = setInterval(function() { 
     if(win.closed) { 
      clearInterval(loop); 
      //Hide your modal or clean your innerhtml here 
     } 
    }, 1000); 
    return(false); 
}else{ 
    // Use XMLHttpRequest 
    xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     var a; 
     if (xhttp.readyState === 4 && xhttp.status === 200) { 
      a.href = window.URL.createObjectURL(xhttp.response); 
      a.download = "name_file"; 
      a.style.display = 'none'; 
      document.body.appendChild(a); 
      a.click(); 
     } 
    }; 
    xhttp.open("POST", 'your_url'); 
    xhttp.setRequestHeader("Connection", "close"); 
    xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    // For a word I must return a 'blob' because it's a binary. Maybe you should change it 
    xhttp.responseType = 'blob'; 
    xhttp.send(JSON.stringify(your_data)); 
    xhttp.addEventListener('readystatechange', function() { 
     if (xhttp.readyState === XMLHttpRequest.DONE) { 
      //Hide your modal, or clean your innerhtml here 
     } 
    }); 
}