Lange ist es her, dass ich etwas über Programmierung gepostet habe. Ja mein Brotberuf hat mich sehr in Beschlag genommen und auch mein Leben darum herum. Und da ist dann einfach auch keine Zeit zum Programmieren. Und was ich hier poste habe ich selbst ausprobiert und auch aus einer Problemstellung entwickelt. Also Praxis und so.
Und in den letzten Tagen hatte ich schon ein kleineres Problem, dass ich nicht so einfach lösen konnte. Jetzt im Rückblick ist es relativ einfach, aber wenn du es nicht findest ist es ein riesen Brocken. Und das ist auch eine der Grundeigenschaften guter ProgrammiererInnen. Den Wunsch ein Problem zu lösen und so lange dran zu bleiben, bis es auch wirklich funktioniert.
Die Aufgabenstellung war relativ einfach
Es soll auf Knopfdruck eine Datei am Server erstellt und gespeichert werden. Und danach soll diese Datei automatisch auf den Computer des/der BenutzerIn übertragen werden. Das klingt jetzt relativ simpel. Ist es aber nicht. Denn wenn du die Datei mit AJAX erstellen lässt, kannst du sie nicht einfach an den Browser zurückschicken. Und auf der anderen Seite kann man mit JavaScript nicht direkt einen Download anfordern.
Die Lösung ist ein wenig jQuery und Nachdenken
Zuerst brauchen wir in der HTMl-Datei einen versteckten Hyperlink. Der kann auch ganz einfach erstellt werden.
<a id="saveFile" style="display:none;"><span></span></a>
Wichtig ist hier das innere span-Element. Denn ohne diesem Element funktioniert der folgende Teil nicht. Ja, das DOM (Document-Object-Model) ist manchmal eigenartig. Nun können wir auch den AJAX-Teil erstellen.
$.ajax({url: 'service/ajax.php', type: 'post', data: {'save': 'new'},
success: function(t) {
var obj = $.parseJSON(t);
$('a#saveFile').attr('href', '//fiels/' + obj.filename + '.xlsx');
$('a#SaveFile span').trigger('click');
}
});
Dieser Code ist sehr einfach zu handeln. Zuerst wird ein AJAX-Aufruf mit Hilfe von jQuery abgesetzt. Ist dieser erfolgreich wird die Funktion in Zeile 2 ausgeführt. Zuerst wird der erhaltene JSON-Code in ein Objekt umgewandelt, da hier der Dateiname der neu erstellten Datei enthalten ist. Dann wird dieser Dateiname als href-Attribut beim versteckten a-Element eingefügt. Und in der 5. Zeile wird dann ein Klick auf das Element ausgeführt. Und diese Zeile hat es auch in sich. Denn sie funktioniert nur wenn ein weiteres HTML-Element innerhalb des a-Elements gefunden wird.
Und damit wird auch die Datei auf den Computer gespeichert und das Problem ist gelöst.
