Download CSV File through JSON Data in JavaScript

Download CSV File through JSON Data in JavaScript


Sometimes it is required to download the data in excel. In ASP.NET, export to excel functionality is in built when using grid but it requires postback of page while downloading the same. So by using javascript, it can easily be done by passing JSON data through MVC Controller.


JSON is a lightweight text-based open standard designed for human-readable data interchange. Nowadays JSON is very popular for processing the data in fast manner. Hence downloading file through JSON data will be much efficient.

Downloading a file in excel format requires page postback at server side. But using javascript and JSON data, the same results can be achieved without any postback.

Below is sample code for generating CSV File through JSON data:

function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {

//If JSONData is not an object then JSON.parse will parse the JSON string in an Object

var arrData = typeof JSONData != ‘object’ ? JSON.parse(JSONData) : JSONData;

var CSV = ”;

//Set Report title in first row or line

//This condition will generate the Label/Header

if (ShowLabel) {

var row = “”;

//This loop will extract the label from 1st index of on array

for (var index in arrData[0]) {


//Now convert each value to string and comma-seprated

row += index + ‘,’;


row = row.slice(0, -1);

//append Label row with line break

CSV += row + ‘\r\n’;


//1st loop is to extract each row

for (var i = 0; i < arrData.length; i++) {

var row = “”;

//2nd loop will extract each column and convert it in string comma-seprated

for (var index in arrData[i]) {

if (index != ‘UserName1’)

row += ‘”‘ + arrData[i][index] + ‘”,’;


row.slice(0, row.length – 1);

//add a line break after each row

CSV += row + ‘\r\n’;


if (CSV == ”) {

alert(“Invalid data”);



//Generate a file name

var fileName = “”;

//this will remove the blank-spaces from the title and replace it with an underscore

fileName += ReportTitle.replace(/ /g, “_”);

//Initialize file format you want csv or xls

var uri = ‘data:text/csv;charset=utf-8,’ + escape(CSV);

blob = new Blob([CSV], { type: ‘text/csv’ }); //new way as anchor tag download not supported in latest chrome so use Blob

var csvUrl = URL.createObjectURL(blob);  //Now file with proper filename is downloaded with proper extension

//this trick will generate a temp <a /> tag

var link = document.createElement(“a”);

link.href = csvUrl;

//set the visibility hidden so it will not effect on your web-layout = “visibility:hidden”; = fileName + “.csv”;

//this part will append the anchor tag and remove it after automatic click




The above function has three parameters:

  • JsonData– specifies the Json to be downloaded,
  • ReportTitle– specifies the name of file to be downloaded,
  • ShowLabel– Boolean value to add headers or not

You need to pass Json Data with proper filename and pass true parameter for ShowLabel to add headers in downloaded file.

Below is the line of code to call the JsonToCSVConvertor function using ajax call.

function DownloadReport() {


type: “POST”,

url: “/Knowledge/DownloadKIReport”,

contentType: “application/json; charset=utf-8″,

datatype: ‘json’,

data: JSON.stringify({}),

success: function (result) {

if (result == ”)



JSONToCSVConvertor(result, “TestReport”, true);


error: function (error, a) {

alert(‘Error in retrieving data..’);




The JsonToCSVConvertor function converts JSON data in csv file and it works well in all those browsers that support Data URI. Internet Explorer (IE8) does not support Data URI but when implemented in IE(8+) then due to some security restrictions it prevent the user to download the file. Hence we can use other alternative in case of Internet Explorer.

Below line of code has to be added for downloading the file in Internet explorer.

A new window will popup so user can copy and paste or simple right click on file and save as text to save the file in text format.

In latest Chrome 35, anchor tag download attribute not working so the downloaded file named as download and without any extension. So in order to open the file, user has to rename the file by adding the extension. This was reported as bug in latest chrome. So by using Blob, we are able to achieve the desired results.


Without postback, we can download the CSV File through above JsonToCSVConvertor function.

  • download csv,
  • download csv file through json,
  • json data,
  • json data in javascript,
  • json to csv converter,
  • report title,
  • sample code for generating csv file through json data,
  • show label,
  • Leave a Reply