Generell wird ein Datei Download nach dem Klick des Users auf einen <a href=“downloadURL“> Link gestartet. Danach kümmert sich der Browser des Users um den Download, und nicht die Webapplikation.

In manchen Fällen möchte man aber innerhalb der Webapplikation auf den Download reagieren und bspw. dem User eine Information über den Download anbieten.

 

Die Lösung ... wir verwenden Ajax für den Download!

Gute Idee, aber:

 

→ Javascript lässt wegen der Sicherheitsrichtlinien keine lower level taks auf dem PC des Users zu.

→ Solche Lösungen sollten nur in gesicherten Umgebungen verwendet werden

 

Ein iFrame und ein Cookie

Damit können wir das Problem lösen. Der Download wird über in einem iFrame initalisiert und das Backend liefert uns (wenn der Download angestoßen wird) ein Cookie zurück.

 

iFrame

Alte Web 1.0 Technologier hilft uns bei diesem Problem tatsächlich weiter. iFrames können im DOM existieren, ohne dass der User diese sehen muss. Hört sich im ersten Moment merkwürdig an, hilft uns aber bei der Initalisierung des Download in einem quasi neuen Fenster – dem iFrame – weiter.

 

Cookie

Da wir nicht direkt überprüfen können, ob ein Download angestoßen wurde, überprüfen wir ob ein Cookie gesetzt wurde. Wenn ein Download in dem iFrame gestartet wurde und der Cookie, welcher vorher definierte wurde gesetzt ist, wissen wir dass im Moment ein Download durchgeführt wird.

 

Wenn der Cookie gesetzt wird, wissen wir dass wir das Popup für den User schließen können. Und das iFrame ebenfalls.

 

Code Demo

 $.fileDownload('/url/to/download.docx');  
 

Zeigt den einfachen Aufruf der jquery.fileDownload Librarie.

Natürlich fehlt an dieser Stelle noch die Fehler Behandlung.

Kompletter Code

 $.fileDownload('/url/to/download.docx', {  
   successCallback: function (url) {  
     alert('You got a file download dialog or ribbon for this :' + url);  
   },  
   failCallback: function (html, url) {  
     alert('Your file download just failed for URL:' + url + '\r\n' +  
         'Here was the resulting error : \r\n' + html  
         );  
   }  
 });  

Hier zu sehen ist die vollständige Fehlerbehandlung.

Backendseitig Cookie setzen

 header('Set-Cookie: fileDownload=true; path=/');  

Und fertig ist der Download Indicator.

Für weitere Code Demos und die englische Beschreibungen schaut euch doch die Library von JohnCulviner an:

https://github.com/johnculviner/jquery.fileDownload

Hinterlassen Sie Ihre Kommentare

0
Bedingungen.
Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Weitere Informationen Ok