Download file on ajax post

Can this be done and how? Don't give up so quickly, because this can be done in modern browsers using parts of the FileAPI:. 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.

That excel file is created by the server and returned as a response to the client. Download that response as a file with custom name in browser ".

Here we need to carefully set few things at the server side. I set few headers in Python Django HttpResponse. You need to set them accordingly if you use other programming languages. Since I download xls excel here, I adjusted contentType to above one. You need to set it according to your file type. You can use this technique to download any kind of files.

What server-side language are you using? This will in fact 'redirect' the browser to this download page, but as ahren alread said in his comment, it won't navigate away from the current page. It's all about setting the correct headers so I'm sure you'll find a suitable solution for the server-side language you're using if it's not PHP. The server then generates a link from where this file can be downloaded, e. For example, the server responds with:.

When processing the response, you inject an iframe in your body and set the iframe 's SRC to the URL you just received like this using jQuery for the ease of this example :. If you've set the correct headers as shown above, the iframe will force a download dialog without navigating the browser away from the current page.

After you've received the JSON response, you can then decide client-side what to do with it. Maybe, for example, later on you want the user to click a download link to the URL instead of forcing the download directly, in your current setup you would have to update both client and server-side to do so.

I see you've already found out a solution, however I just wanted to add some information which may help someone trying to achieve the same thing with big POST requests.

I had the same issue a couple of weeks ago, indeed it isn't possible to achieve a "clean" download through AJAX, the Filament Group created a jQuery plugin which works exactly how you've already found out, it is called jQuery File Download however there is a downside to this technique. In slow Internet connections you'll have to wait a lot until the request is sent and also wait for the file to download. But as I discovered in my own app, for bigger file sizes it is almost unbearable. My app allow users to export images dynamically generated, these images are sent through POST requests in base64 format to the server it is the only possible way , then processed and sent back to users in form of.

In slow Internet connections it can be really annoying. My solution for this was to temporary write the file to the server, once it is ready, dynamically generate a link to the file in form of a button which changes between "Please wait This makes all the waiting time more bearable for users, and also speed things up. Months have passed since I posted this, finally I've found a better approach to speed things up when working with big base64 strings. I now store base64 strings into the database using longtext or longblog fields , then I pass its record ID through the jQuery File Download, finally on the download script file I query the database using this ID to pull the base64 string and pass it through the download function.

I know this is way beyond what the OP asked, however I felt it would be good to update my answer with my findings. For those looking a more modern approach, you can use the fetch API. The following example shows how to download a spreadsheet file. It is easily done with the following code. Also, it has a similar syntax to the jQuery approach, without the need to add any additional libraries.

Of course, I would advise checking to which browser you are developing, since this new approach won't work on IE. You can find the full browser compatibility list on the following [link][1]. This url must be set, on my example I am assuming you know this part. Also, consider the headers needed for your request to work. I want to point out some difficulties that arise when using the technique in the accepted answer, i.

You can't set headers on the request. If your authentication schema involves headers, a Json-Web-Token passed in the Authorization header, you'll have to find other way to send it, for example as a query parameter.

You can't really tell when the request has finished. Well, you can use a cookie that gets set on response, as done by jquery. It won't work for concurrent requests and it will break if a response never arrives. You can only use the content types supported by a form. Which means you can't use JSON. I ended up using the method of saving the file on S3 and sending a pre-signed URL to get the file.

As others have stated, you can create and submit a form to download via a POST request. However, you don't have to do this manually. One really simple library for doing exactly this is jquery. It provides an API similar to the standard jQuery. This is a 3 years old question but I had the same problem today. I looked your edited solution but I think that it can sacrifice the performance because it has to make a double request. Collectives on Stack Overflow. Learn more. Download a file by jQuery.

Ajax Ask Question. Asked 10 years, 11 months ago. Active 1 month ago. Viewed k times. I have a Struts2 action in the server side for file downloading. Improve this question. I marked it as a duplicate despite the platform difference, because as far as I can see the solution is the same You can't and don't need to do this through Ajax. Add a comment. Active Oldest Votes. Improve this answer. John Culviner John Culviner I love what you built but I suspect that to get more StackOverFlow credit your answer here should contain a bit more detail.

Specifically on how you solved the problem. I agree, a blog is a far better place to place a lengthy description of how to use your plugin and how it works. For example, this solves the problem by having the server set a cookie and having your javascript continuously look for the cookie until it exists. Once it exists, we can assume that the download is complete. Royi, as I understand it AJAX can never support file downloads that result in a file download popup to save to disk.

Have you found a way that I'm unaware of? Show 14 more comments. You don't need to do this through Ajax. Just use window. Nice one Note that this requires the server to be setting a Content-Disposition header value of 'attachment', otherwise the browser will redirect to and display the response content — brichins. Or alternatively use window. To solve that use the iFrame solution — kofifus. The real problem with this solution - question is about POST request. Show 4 more comments. Community Bot 1 1 1 silver badge.

Luke Madhanga Luke Madhanga 4, 1 1 gold badge 38 38 silver badges 42 42 bronze badges. The a. Any idea? It simply doesn't, while all instinct says it must. I am using Chrome Version Thank you, I used this solution. Worked like a charm.

Also, if you don't get a blob from the response, just create a new Blob. For example, when downloading a ZIP: response. Andrea Ligios Andrea Ligios Sir, Your input: "Content-Disposition", "inline; This is the only answer that mentions "window.

It does not work if you have a lot of parameters, because you will get too long url error. That sends the data in a very strange way to the server though. I wonder if it could be altered to create compliant POST? I faced the same issue and successfully solved it. My use-case is this. After fetching content as a blob binary , we are creating a downloadable URL and attaching it to invisible "a" link then clicking it.

I did a POST request here. Instead, you can go for a simple GET too. Naren Yellavula Naren Yellavula 6, 2 2 gold badges 27 27 silver badges 22 22 bronze badges. Otherwise great solution for modern web browsers. Shayne Shayne 1, 1 1 gold badge 15 15 silver badges 17 17 bronze badges. This is working example.

Is it possible to do that without iframe but without window. I suppose you could just append the hidden form to the bottom of the DOM. Also possibly worth exploring is use of the Shadow dom , although thats not necessarily well supported on older browsers. In this code I am getting this error. The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "data".

Protocols must match. How can I map this form to some model class? Thats probably a whole stack overflow question in and of it self. But the principle would be to take the name and path and store that, whilst pushing the file itself into a web accessible area of the file system, or something like amazon S3 for high availability — Shayne.

Here is a quick fiddle jsfiddle. You are totally right load event is fired right after the server is done processing starts sending the file. This is what i was looking for, 1- block the button and show processing so that the user can have a feedback that things are happening. The more interesting thing about this is how the file is downloaded after sending the HTTP request.

Let's dive straight into it:. The actual download is done by creating a Blob object, which is used for a newly created a tag with a link to the created Blob object which is automatically clicked which ultimately opens the "Save file" dialog.

Additionally it's appended to the body which is a fix for Firefox and is removed from the body afterwards we don't want to have tons of invisible a tags on our body. Keep in mind that this implementation uses plain JavaScript to make it easier for everybody to follow the example , but the actual download works the same for most frameworks jQuery, Vue, Angular,