I am creating first html table from Json Data and add this table into the div(this div is hidden). and after then I export html table.
Open in JSFiddle Open JSFiddle!
Html Code
<label for="txtExcelFileName">Excel File Name</label><br/>
<input type="text" class="form-control" id="txtExcelFileName" value="fileName" aria-describedby="Excel file Name" placeholder="Excel File Name without Extension"><br/>
<button type="button" class="btn btn-success" id="btnExport">Export</button>
<div style="display:none;" id="example">
</div>
Jquery Code
var mydata=[
{SrNo: 1, ProductName: "Ipnone 13 Pro 128gb", Price: 90000},
{SrNo: 2, ProductName: "Iphone 13 Pro Max 128gb", Price: 120000},
{SrNo: 3, ProductName: "Iphone 12 pro 128gb", Price: 75000},
{SrNo: 4, ProductName: "Iphone 12 pro Max 128gb", Price: 85000}
];
$("#btnExport").click(function () {
if(mydata.length<1)
{
alert("There are no data in grid. First click on refresh button and after you can export xlsx...");
return;
}
var _fileName=$("#txtExcelFileName").val();
if(_fileName.length<=5)
{
alert("Please enter file name more then 10 character...");
return;
}
_fileName=_fileName+".xls";
ConvertDataStructureToTable(mydata);
tableToExcel('tabledata', 'Stock Analysis', _fileName);
});
function ConvertDataStructureToTable(mydata) {
var result = "<table id='tabledata'>";
result += "<thead><tr>";
result += "<th>SrNo</th>";
result += "<th>Product Name</th>";
result += "<th>Price</th>";
result += "</tr></thead>";
result += "<tbody>";
$(mydata).each(function (key, value1) {
//console.log(key);
//console.log(value1);
result += "<tr>";
result += "<td style='mso-number-format:\"\@\"'>"+value1["SrNo"]+"</td>";
result += "<td style='mso-number-format:\"\@\"'>"+value1["ProductName"]+"</td>";
result += "<td>"+value1["Price"]+"</td>";
result += "</tr>";
});
result += "</tbody>";
result += "</table>";
$("#example").html("");
$("#example").html(result);
//console.log("..Called..");
//console.log(result);
//return result;
}
var tableToExcel = (function () {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64 = function (s) {
return window.btoa(unescape(encodeURIComponent(s)))
}, format = function (s, c) {
return s.replace(/{(\w+)}/g, function (m, p) {
return c[p];
})
}
return function (table, name, filename) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {
worksheet: name || 'Worksheet',
table: table.innerHTML
}
var link = document.createElement('a');
link.href = uri + base64(format(template, ctx));
link.download = filename;
link.traget = "_blank";
$("#example").html(link);
link.click();
}
})();