Handle file download from ajax post
Create a form, use the POST method, submit the form - there's no need for an iframe. When the server page responds to the request, write a response header for the mime type of the file, and it will present a download dialog - I've done this a number of times.
You want content-type of application/download - just search for how to provide a download for whatever language you're using.
download file using an ajax request
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.
Ajax response is a file download
If you returned your file data as an octet stream, you could initiate the download like done here -> Save file Javascript with file name
uriContent = "data:application/octet-stream," + encodeURIComponent(dataFromServer);
newWindow=window.open(uriContent, 'filename.txt');
Push File Download on Ajax POST Nodejs Express
i fixed the issue by adding a reponseType on Client Side Code. Now the blob and ObjectUrl works correctly
$http({
method: 'POST',
url: 'MyUrl',
data: PostData, //forms user object
headers: {
'Content-Type': 'application/json'
},
responseType: 'arraybuffer'
})
.then(function (response) {
console.log(response);
var headers = response.headers();
var blob = new Blob([response.data],{type:headers['content-type']});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "Archive.tgz";
link.click();
});
Ajax doesn't get a success response back after file upload
Solution, but cannot mark it:
The problem was something way different. I had to format the output from csvToJson() in upload.php to UTF-8. After that I get a json as the respone.
Function for formatting to UTF-8 (got it from another post here)
function utf8ize($d) {
if (is_array($d)) {
foreach ($d as $k => $v) {
$d[$k] = utf8ize($v);
}
} else if (is_string ($d)) {
return utf8_encode($d);
}
return $d;
}
Related Topics
How to Mute Video With JavaScript or Jquery
Show Multiple Divs on Button Click
Check If a Number Has Repeated Digits
Combine Multiple JavaScript Files into One Js File
Get Request Works With Postman But Why Doesn't It Work With Reactjs Fetch
Size of Json Object (In Kbs/Mbs)
Swiper Slider - Thumbs Gallery With Slidetoclickedslide Do Not Work Properly
How to Count the Entire Number of Rows in a Datatable
Download Image as File in Typescript
How to Clear All Input Fields in Bootstrap Modal When Clicking Data-Dismiss Button
Node.Js MySQL Query in a for Loop
How to Format Numbers in Vuejs
Parsing String as Json With Single Quotes
How to Reduce Vendor/Script Bundle.Js in Angular 5
Mongodb Get Data to Display in HTML
How to Set Top and Bottom Margin in Addhtml
How to Change Background Opacity When Bootstrap Modal Is Open