Datei-Download von Ajax-Post verarbeiten

Question

Ich habe eine JavaScript-App, die Ajax POST-Anforderungen an eine bestimmte URL sendet. Die Antwort kann ein JSON-String sein oder es kann sich um eine Datei handeln (als Anhang). Ich kann problemlos Content-Type und Content-Disposition in meinem Ajax-Aufruf erkennen, aber sobald ich feststelle, dass die Antwort eine Datei enthält, wie kann ich dem Client anbieten, sie herunterzuladen? Ich habe eine Reihe ähnlicher Threads hier gelesen, aber keiner von ihnen liefert die Antwort, nach der ich suche.

Bitte, bitte, bitte posten Sie keine Antworten, die vorschlagen, dass ich Ajax nicht verwenden sollte oder den Browser umleiten sollte, denn das ist keine Option. Die Verwendung eines einfachen HTML-Formulars ist ebenfalls keine Option. Was ich brauche, ist, dem Client einen Download-Dialog anzuzeigen. Kann dies gemacht werden und wie?

Answer 1

Ich habe Naren Yellavulas Lösung verwendet und sie mit wenigen Änderungen am Skript zum Laufen gebracht, nachdem ich mehrere andere Lösungen mit jQuery ausprobiert hatte. Aber jQuery lädt eine Zip-Datei nicht richtig herunter. Ich kann die Datei nach dem Download nicht entzippen. In meinem Anwendungsfall muss ich eine Zip-Datei hochladen, die im Servlet entzippt wird, die Dateien werden verarbeitet und erneut gezippt, bevor die Zip-Datei zum Client heruntergeladen wird. Das ist es, was du auf der Client-Seite tun musst.

$('#fileUpBtn').click(function (e){
         e.preventDefault();
         var file = $('#fileUpload')[0].files[0];
         var formdata = new FormData();
         formdata.append('file', file);

        // Verwenden Sie XMLHttpRequest anstelle von Jquery $ajax, um Zip-Dateien herunterzuladen
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState === 4 && xhttp.status === 200) {
                var a = document.createElement('a');
                a.href = window.URL.createObjectURL(xhttp.response);
                a.download = "modified_" + file.name;
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                window.URL.revokeObjectURL(a.href);
            }
        };
        xhttp.open("POST", "", true);
        xhttp.responseType = 'blob';
        xhttp.send(formdata);     
     });