JSFiddle - React, Tailwind, and code Playground

by aswinkumar863

HTML

<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.jquery.com/jquery-2.1.4.js" integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/export/libs/FileSaver.js/FileSaver.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.6/xlsx.full.min.js"></script>

    <style>
      table,
      td {
        border: 1px solid black;
      }

    </style>
  </head>

  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.3/xlsx.full.min.js">
    </script>

    <p>Click the button to add a new row at the first position of the table and then add cells and content</p>

    <table id="myTable">
      <TR>
      </TR>
    </table>
    <button type="button" id="first" onclick="First('myTable')">Principal</button>
    <button id="button-a">Create Excel</button>
    <script>
      function First(tableID) {
        let table = document.getElementById(tableID)
        table.innerHTML = "<td>first</td>";
      }

    </script>

    <script>
      function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
      }
      $("#button-a").click(function() {
        var wb = XLSX.utils.table_to_book(document.getElementById('myTable'), {
          sheet: "Sheet JS"
        });
        var wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'binary'
        });
        saveAs(new Blob([s2ab(wbout)], {
          type: "application/octet-stream"
        }), 'test.xlsx');
      });

    </script>
  </body>

</html>