JSFiddle - React, Tailwind, and code Playground

by Mahmoud Kandeel

HTML

<script type="text/javascript">
  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]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></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) {
      if (!table.nodeType) table = document.getElementById(table)
      var ctx = {
        worksheet: name || 'Worksheet',
        table: table.innerHTML
      }
      window.location.href = uri + base64(format(template, ctx))
    }
  })()

</script>

<h1>tableToExcel Demo</h1>
<p>Exporting the W3C Example Table</p>

<input type="button" onclick="tableToExcel('testTable', 'W3C Example Table')" value="Export to Excel">

<table id="testTable" summary="Code page support in different versions of MS Windows." rules="groups" frame="hsides" border="2">
  <caption>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</caption>
  <colgroup align="center"></colgroup>
  <colgroup align="left"></colgroup>
  <colgroup span="2" align="center"></colgroup>
  <colgroup span="3" align="center"></colgroup>
  <thead valign="top">
    <tr>
      <th>Code-Page<br>ID</th>
      <th>Name ö,ü,ö</th>
      <th>ACP</th>
      <th>OEMCP</th>
      <th>Windows<br>NT 3.1</th>
      <th>Windows<br>NT 3.51</th>
      <th>Windows<br>95</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1200</td>
      <td...