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. View Demo. Related Articles. Add Comments. Thank you for the feedback. The comment is now awaiting moderation. You will be notified via email when the author replies to your comment.
Please select a comment to reply. You can add your comment about this article using the form below. You can add your comment about this article using the form below.
Make sure you provide a valid email address else you won't be notified when the author replies to your comment Please note that all comments are moderated and will be deleted if they are Not relavant to the article Spam Advertising campaigns or links to other sites Abusive content.
Please do not post code, scripts or snippets. Required Invalid Email Address. Security code:. Required Invalid security code. I declare, I accept the site's Privacy Policy. Add Comment. Disclaimer : The code samples and API available at www.
You are free to use it for commercial as well as non-commercial use at your own risk, but you cannot use it for posting on blogs or other tutorial websites similar to www. All the code samples and API provided by the authors are solely their creation and neither the author nor the site are responsible if it does not work as intended. I agree to the above terms.
Download Required. In the example ajax progress bar with percentage script, we will implement the following functionality. Before getting started to integrate file upload with progress bar , take a look at the file structure. The index. File Upload Form: 1. Create an HTML form with a file input field and a submit button. The following jQuery code sends the selected file data to the server-side script without reloading the page via Ajax.
The upload. The progress bar provides and user-friendly way of showing the upload completion status in real-time.
0コメント