JSFiddle - React, Tailwind, and code Playground

by ronnjoe

HTML

<div id="excelDataExport"></div>

JavaScript

// JSON to CSV Convertor 
$(document).ready(function() {
	var exportToExcelData = [{
    "First_Name":"",
    "Last_Name":""
  }];
  var jsonDataSet ={
    "data": [{
      "firstname": "Joe",
      "lastname": "Jerald"
    }, {
      "firstname": "Wayne",
      "lastname": "Rooney"
    }, {
      "firstname": "Manchester",
      "lastname": "United"
    }]
  }
  //exportToExcelData.push(jsonDataSet.data);
  $.each(jsonDataSet.data, function(i, e) { 
  	var tempData = [];
    tempData.firstName = e.firstname;
    tempData.lastname = e.lastname;
    exportToExcelData.push(tempData);
  });
  jsonToCsvConvert(exportToExcelData,"MyProfile",true);
  function jsonToCsvConvert(jsonData,ReportTitle,ShowLabel) {
    var arrData = typeof jsonData != 'object' ? JSON.parse(jsonData) : jsonData;
    var CSV = '';
    if (ShowLabel) {
      var row = "";
      for (var index in arrData[0]) {
        row += index.replace(/_/g, ' ') + ',';
      }
      row = row.slice(0, -1);
      CSV += row + '\r\n';
    }
    for (var i = 0; i < arrData.length; i++) {
      var row = "";
      for (var index in arrData[i]) {
        row += '"' + arrData[i][index] + '",';
      }
      row.slice(0, row.length - 1);
      CSV += row + '\r\n';
    }
    if (CSV == '') {
      alert("Invalid data");
      return;
    }
    var fileName = "";
    fileName += ReportTitle.replace(/ /g, "_");
    var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
    var link = document.createElement("a");
    link.href = uri;
    link.style = "visibility:hidden";
    link.download = fileName + ".csv";
    document.getElementById("excelDataExport").appendChild(link);
    link.click();
    document.getElementById("excelDataExport").removeChild(link);
  }
});