Javascript Download File Ajax
Javascript Download File Ajax 4,2/5 2618 votes
  1. Node Js Download File Ajax
  2. Download File From Ajax Request
  1. Hi, From Jquery ajax i am making a C# function call which is returing a file download option. If i am using $.ajax, it is not working, if i am giving window.location = url then that download box is coming.
  2. Download a file by jQuery.Ajax. Ask Question Asked 8 years, 9 months ago. Active 2 months ago. I found a fix that while it's not actually using ajax it does allow you to use a javascript call to request the download and then get a callback when the download actually starts. I found this helpful if the link runs a server side script that.
  3. Currently most of the web applications show a normal link for the user to download a file. However it is also possible to download a file using a Javascript AJAX request. Javascript Node.js PHP CSS UI / UX Bots Cloud Useful Resources. Javascript - Downloading Files with AJAX and Showing a Progess Bar.
  4. In such cases, (when we need to use AJAX to make a HTTP POST and then download a file), the solution is to use a 2 pronged approach, where we would first make the HTTP Post request, and in the controller action we would store the File content in a Memory stream.

Client browser displays file download popup dialog and allows user to download the file; Our application is ajax based application, so it would be very easy and convenient for us to send ajax request (like using jquery.ajax function).

Active2 years, 6 months ago

I have a button and onclick it will call an ajax function.

Jquery.fileDownload.js Library jQuery File Download is a cross server platform compatible jQuery plugin that allows for an Ajax-like file download experience that isn’t normally possible using the web. Download File Using Javascript/jQuery. JQuery Ajax call for PDF file download. JavaScript/jQuery to download file via POST with JSON data.

Here is my ajax function

Although the integration services installed properly, there is a yellow exclaimation on the Virtual Machine Bus driver in Vista. I can get network connectivity through the legacy driver. Virtual drivers for windows 10.

I create the csv file based on the user input. After it's created I want it to prompt download or force download(preferably force). I am using the following script at the end of the php file to download the file. If I run this script in a separate file it works fine.

But If I run it at the end of csv.php it outputs the contents of the file.csv into the page(into the ajaxDiv) instead of downloading.

Is there a way to force download the file at the end of csv.php?

theking963theking963
1,0805 gold badges21 silver badges39 bronze badges

5 Answers

AJAX isn't for downloading files. Pop up a new window with the download link as its address, or do document.location = ...

Marc BMarc B
322k31 gold badges340 silver badges439 bronze badges

A very simple solution using jQuery:

on the client side:

and on the server side, make sure you send back the correct Content-Type header, so the browser will know its an attachment and the download will begin.

Muthu Kumaran
15.2k5 gold badges35 silver badges61 bronze badges
blink281blink281

@joe : Many thanks, this was a good heads up!

I had a slightly harder problem:1. sending an AJAX request with POST data, for the server to produce a ZIP file2. getting a response back3. download the ZIP file

So that's how I did it (using JQuery to handle the AJAX request):

  1. Initial post request:

The 'request/url' handles the zip creation (off topic, so I wont post the full code) and returns the following JSON object. Something like:

The 'request/download' can perform some security checks, if needed, and generate the file transfer:

DarioDario

I have accomplished this with a hidden iframe. I use perl, not php, so will just give concept, not code solution.

Client sends Ajax request to server, causing the file content to be generated. This is saved as a temp file on the server, and the filename is returned to the client.

Client (javascript) receives filename, and sets the iframe src to some url that will deliver the file, like:

Server slurps the file, unlinks it, and sends the stream to the client, with these headers:

Works like a charm.

joejoe
6081 gold badge9 silver badges16 bronze badges

You can't download the file directly via ajax.

You can put a link on the page with the URL to your file (returned from the ajax call) or another way is to use a hidden iframe and set the URL of the source of that iframe dynamically. This way you can download the file without refreshing the page.

Here is the code

Naimish B. MakwanaNaimish B. Makwana

Not the answer you're looking for? Browse other questions tagged phpjavascriptajaxdownload or ask your own question.

Ajax
23 Feb 2017CPOL
This article is about how to convert files into Zip and download as single Zip.

Introduction

Now a days almost every websites supports download file feature. Now as a developer we face several issue when providing such funtionality. Let see the problems:

  1. We must know the file content type on client side to save it in proper format.
  2. As browsers cann't handle every type of file as some of them do not have any MimeType defined like '.bak' files.
  3. Sometimes, browser at client machine does not allows you to download file as it might be harmful in nature.

So we have to find a way to overcome such problems and the solution is zipping the file .i.e. 'ZIP'. Zipping files also has its own benefits apart from solving the mentioned problems like it also compress the file size thus making web bandwidth consumption low and thus increasing website as a user experience. So let's start it.

Node Js Download File Ajax

Background

The background is the knowledge of MVC. You should know how to add a project in MVC and add a Controller. If you wants to start with MVC first you can learn it from my other articles as listed below: As we will be using ajax so knowledge of Jquery is also pre-requisite. We will be creating a page which will be having a button that will post a ajax request to server and server will return file as a zip.

Using the Code

We will be using DotNetZip library for zipping files. Please visit this link DotNetZip

We also be using javascript FileSaver.js library for saving the zip files. Please visit this link FileSaver.js

Now add an MVC project. I assume that you have created a HomeController and Index method in it. The index method will return a index cshtml View. Now We will add a mthod which will be invoked on click of a button from Index page.

So basically our process will be like:

Download File From Ajax Request

Load Index Page >> 'Click Download Zip' >> Invoke Ajax post method >> Invoke MVC Controller Method (Which will be using DotNetZip library and Zip the files) >> save file.

Let first add the DotNetZip library reference to our project. For that you need to navigate to Tools >> NuGet package Manager >> Package Manager Console

Now type the following command: 'Install-Package DotNetZip' (without quotes). Now you have installed the DotNetZip library and you can verify it from 'References' folder in SolutionExplorer window.

Now add the FileServer.js library reference to our project/HTML. For this you can either download FileSaver.js file from server and its refence into html or use cdn path as I used.

Now follow the steps to create a working demo.

Step 1: Add using reference to 'HomeController' using using Ionic.Zip;

So you can see its quite simple Index method is added. Now let see the code in our CSHTML page (Index.cshtml).

Step 2: Add Images to Image folder.

Here is the image of my Project folder structure. I have added an Image folder to project and added two images into it so that I can zip these images and download.

So you can see its quite simple structure. Now lets start writing the code for a method/action that will return the files as a single zip file.

So you can see its quite simple code and its self explanatory. Enter your doubts in comment if any

Masking

Step 3: Index.cshtml View Code

Below is the html code that has A simple download button that will call the above method and in result downloads a zip file that will have two files zipped in it.

Till now we have a running code that will download files as a single Zip Unit with compressed size. You can download the code file in link attached with this article. Further we will see how we can use an ajax call for the same.

Step 4: Updating code to download File with Ajax Call.

Now this is the main step which is problematic in most cases. It is verfy tricky to download a file content 'blob' as a file and save it as a zip. For this I have added a script reference (filesaver.js) as you can see in above html code as well. Below is the full code.

Note: I have used plain HttpRequest as : jQuery ajax is not able to handle binary responses properly (can't set responseType), so it's better to use a plain XMLHttpRequest call. For more detail on this, you can read this Stackoverflow link.

Now you have full code, you just need to build the project and run it. Whola!! You have done it.

Points of Interest

You can convert as many as file you want into a single zip and push to client machine. You bandwidth is saved. You can also save a MemoryStream object to zip and download that. Keep in mind jquery doesn't support 'blob' till the time and we can have some workaround but using plain XmlHttpRequest is always a winner.

Things to learn

You can learn how we can modify juery request to save blob/binary/arraybuffer objects.

You can learn how we can save zip blob directly without using third party api/script/plugins.

That's all from my side for this article, comments and suggestions are welcomed.

⇐ ⇐ Calibrate Hp Battery Windows 7
⇒ ⇒ Free Might And Magic Games