JSFiddle - React, Tailwind, and code Playground

by fabiosm

HTML

<input type="button" onclick="tableToExcel('testTable', 'W3C Example Table')" value="Export to Excel">
<table id="testTable" rules="groups" frame="hsides" border="2">
    <thead valign="top">
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col">1</td>
            <td class="blue">Abhishek</td>
        </tr>
        <tr>
            <td class="col">2</td>
            <td class="font">Jain</td>
        </tr>
    </tbody>
</table>

CSS

body {

    font-size: 12pt;

    font-family: Calibri;

    padding : 10px;

}

table {

    border: 1px solid black;

}

th {

    border: 1px solid black;

    padding: 5px;

    background:grey;

    color: white;

}

td {

    border: 1px solid black;

    padding: 5px;

}

input {

    font-size: 12pt;

    font-family: Calibri;

}

.blue {

    background-color: #00f;

    color: #fff;

}

.font {

    font-weight: bold;

}

.col {

    background-color: red;

}

JavaScript

(function ($) {
    var rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
    for (var idx = 0, len = rules.length; idx < len; idx++) {
        $(rules[idx].selectorText).each(function (i, elem) {
            elem.style.cssText += rules[idx].style.cssText;
        });
    }
    $('style').remove();
})(jQuery);

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) {
        if (!table.nodeType) table = document.getElementById(table)
        var ctx = {
            worksheet: name || 'Worksheet',
            table: table.innerHTML
        }
        window.location.href = uri + base64(format(template, ctx))
    }
})()