JSFiddle - React, Tailwind, and code Playground

by ahirmanish81

HTML

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<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>

JavaScript

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...