download file using an ajax request

Question

I want to send an "ajax download request" when I click on a button, so I tried in this way:

javascript:

var xhr = new XMLHttpRequest(); xhr.open("GET", "download.php"); xhr.send(); 

download.php:

<? header("Cache-Control: public"); header("Content-Description: File Transfer"); header("Content-Disposition: attachment; filename= file.txt"); header("Content-Transfer-Encoding: binary");     readfile("file.txt"); ?> 

but doesn't work as expected, how can I do ? Thank you in advance

Answer 1

Update April 27, 2015

Up and coming to the HTML5 scene is the download attribute. It's supported in Firefox and Chrome, and soon to come to IE11. Depending on your needs, you could use it instead of an AJAX request (or using window.location) so long as the file you want to download is on the same origin as your site.

You could always make the AJAX request/window.location a fallback by using some JavaScript to test if download is supported and if not, switching it to call window.location.

Original answer

You can't have an AJAX request open the download prompt since you physically have to navigate to the file to prompt for download. Instead, you could use a success function to navigate to download.php. This will open the download prompt but won't change the current page.

$.ajax({     url: 'download.php',     type: 'POST',     success: function() {         window.location = 'download.php';     } }); 

Even though this answers the question, it's better to just use window.location and avoid the AJAX request entirely.

Answer 2

To make the browser downloads a file you need to make the request like that:

 function downloadFile(urlToSend) {      var req = new XMLHttpRequest();      req.open("GET", urlToSend, true);      req.responseType = "blob";      req.onload = function (event) {          var blob = req.response;          var fileName = req.getResponseHeader("fileName") //if you have the fileName header available          var link=document.createElement('a');          link.href=window.URL.createObjectURL(blob);          link.download=fileName;          link.click();      };       req.send();  }