I am trying to export my web page data and download it as excel file. But the download does not start even the response return succeed. $.ajax( type: 'POST', url: url, contentT. I'm trying to create a button to download a file using jQuery and a FileActionResult. All data are correctly retrieved, but I cannot retrieve download file. This is my javascript code. Mar 02, 2007 ASP.NET AJAX is a set of technologies to add AJAX (Asynchronous JavaScript And XML) support to ASP.NET. It consists of a client-side script framework, server controls, and more. File Size: 1.4 MB. ASP.NET AJAX integrates client script libraries with the. Arises more problem when need to create multiple zip files on page load for download. To avoid this type of problem you can either use only PHP or jQuery AJAX to create and download the zip file when it’s required. In this tutorial, I am using jQuery 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:
- We must know the file content type on client side to save it in proper format.
- As browsers cann't handle every type of file as some of them do not have any MimeType defined like '.bak' files.
- 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.
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:
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
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.
Ajax Pdf Download
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.