JSFiddle - React, Tailwind, and code Playground

by Chance Nursey-Bush

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<a href="#" value="Export to Excel" id="export">Export to Excel</a>
<br />
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>Jennifer Acosta</td>
            <td>Junior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>43</td>
            <td>2013/02/01</td>
            <td>$75,650</td>
        </tr>
        <tr>
            <td>Cara Stevens</td>
            <td>Sales Assistant</td>
            <td>New York</td>
            <td>46</td>
            <td>2011/12/06</td>
            <td>$145,600</td>
        </tr>
        <tr>
            <td>Hermione Butler</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>47</td>
            <td>2011/03/21</td>
            <td>$356,250</td>
        </tr>
        <tr>
            <td>Lael Greer</td>
            <td>Systems Administrator</td>
            <td>London</td>
            <td>21</td>
            <td>2009/02/27</td>
            <td>$103,500</td>
        </tr>
        <tr>
            <td>Jonas Alexander</td>
            <td>Developer</td>
            <td>San Francisco</td>
            <td>30</td>
            <td>2010/07/14</td>
            <td>$86,500</td>
        </tr>
        <tr>
            <td>Shad Decker</td>
            <td>Regional Director</td>
            <td>Edinburgh</td>
            <td>51</td>
            <td>2008/11/13</td>
            <td>$183,000</td>
        </tr>
        <tr>
            <td>Michael Bruce</td>
            <td>Javascript Developer</td>
            <td>Singapore</td>
            <td>29</td>
     ...

JavaScript

function fn_get_rep_table()
{
    var oSettings = $rep_datatable.fnSettings();
    var colTitles = $.map(oSettings.aoColumns, function(node) {
        return node.sTitle;
    });
    
    var $str_return='<thead><tr>';
    
    jQuery.each(colTitles, function() 
                {
                    $str_return+='<th>'+this+'</th>';       
                });
    
    $str_return+='</tr></thead><tbody>';
    
    var $rep_data = $rep_datatable.fnGetData();
    
    $.each($rep_data, function(key1, value1)
           {
               $str_return+='<tr>';
               $.each(value1, function(key2, value2)
                      {
                          $str_return+='<td>'+value2+'</td>';  
                      });
               $str_return+='</tr>';
           });
    
    $str_return+='</tbody>';
    return $str_return;
}

var tableToExcelBlob = (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 (tableMarkup, name) {
            var ctx = {
                worksheet: name || 'Worksheet',
                table: tableMarkup
            }
            return new Blob([format(template, ctx)]);
        }
})()

function saveBlob(fileNameToSaveAs, blob) {
    var ie = navigator.userAgent.match(/MSIE\s([\d.]+)/),
   ...