PHP to download zip file works when called directly but not from web application

Question

I have a PHP code which produces a zip file and make it downloadable from browser. The download part looks like:

download.php

// force client download
if (headers_sent()) {
    echo 'HTTP header already sent';
} else {
    if (!is_file($zipFile)) {
    header($_SERVER['SERVER_PROTOCOL'].' 404 Not Found');
    echo $zipFile . ' not found';
    } else if (!is_readable($zipFile)) {
        header($_SERVER['SERVER_PROTOCOL'].' 403 Forbidden');
        echo $zipFile . ' not readable';
    } else {
        ob_start();
        // http headers for zip downloads
        header('Content-Description: File Transfer');
        header('Content-Type: application/zip');
        header('Content-Disposition: attachment; filename="' . $zipName . '"');
        header('Content-Transfer-Encoding: binary');
        header('Connection: Keep-Alive');
        header('Expires: 0');
        header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
        header('Pragma: public');

        set_time_limit(0);
        ob_flush();
        ob_clean();
        readfile($zipFile);
    }
}

When called from the browser directly like localhost/download.php it works and makes me download the zipped file properly.

However, I need to call it from my JS web application.

The way I am invoking it is via a POST AJAX request that look like this:

var xhr;
if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // all browsers
else xhr = new ActiveXObject("Microsoft.XMLHTTP"); // for IE

var php_url = '/localhost/download.php' // ?wfs_url=' + url + 'format=' + format_list[0];
// (https://stackoverflow.com/a/53982364/1979665)
var formData = new FormData();
formData.append('wfs_url', url);
formData.append('format', format_list[0]);
xhr.open('POST', php_url);
xhr.onreadystatechange = function () {
    if (xhr.readyState===4 && xhr.status===200) {
        alert('Server reply: ' + xhr.responseText);
    }
}
xhr.send(formData);

return false;

The code is triggered when I click on a button.

Apparently it's doing "something". The PHP intermediate outputs (some folders) are correctly created, but the download does not begin.

The alert('Server reply: ' + xhr.responseText); part shows a strange message with some messy symbols, which I guess derives from the files created and read as text somehow.

Here is a screenshot of the message:

Answer 1

The PHP script is sending the actual binary source of the zip file, while the AJAX request is trying to display it as text, that's the garbage you get.

If you really want to keep the AJAX (it would be more simple to just make a <form> that is sent to download.php), you could do one two things:

• Just print the URL to $zipFile in PHP, and then when you get the response redirect to it with window.location.href=xhr.responseText;.

• Save the response as a zip file. See How to save binary data of zip file in Javascript?

Answer 2

After following option 2 in @Gabriel accepted answer I was able to make my code working. Here is the modified version of the JS (I didn't make any change in the PHP code):

var php_url = '/localhost/download.php' // ?wfs_url=' + url + 'format=' + format_list[0];
// (https://stackoverflow.com/a/53982364/1979665)
var formData = new FormData();
formData.append('wfs_url', url);
formData.append('format', format_list[0]);
xhr.open('POST', php_url);
xhr.onreadystatechange = function () {
    if (xhr.readyState===4 && xhr.status===200) {
        var blob = new Blob([xhr.response], { // SOLUTION
            type: "application/zip", // SOLUTION
        }); // SOLUTION
        var filename = "test.zip"; // SOLUTION
        if (navigator.msSaveOrOpenBlob) { // SOLUTION
            navigator.msSaveOrOpenBlob(blob, filename); // SOLUTION
        } else { // SOLUTION
            var a = document.createElement("a"); // SOLUTION
            document.body.appendChild(a); // SOLUTION
            a.style = "display:none"; // SOLUTION
            var url = window.URL.createObjectURL(blob); // SOLUTION
            a.href = url; // SOLUTION
            a.download = filename; // SOLUTION
            a.click(); // SOLUTION
            window.URL.revokeObjectURL(url); // SOLUTION
            a.remove(); // SOLUTION
         } // SOLUTION
    }
}
xhr.responseType = "arraybuffer"; // SOLUTION
xhr.send(formData);