JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<button id="downloadIntermidiate">downloadIntermidiate</button>

<table class="table table-bordered" id="intermediateTable">
	<thead><tr><th colspan="10">Intermediate Table / Supporting Table showing how allocation of cost is done</th><th colspan="5">Allocations</th></tr></thead>
<thead>
<tr><th>empid</th><th>name</th><th>category</th><th>workingdays</th><th>event1</th><th>event2</th><th>event3</th><th>event4</th><th>event5</th><th>salary</th><th>event1</th><th>event2</th><th>event3</th><th>event4</th><th>event5</th></tr></thead>             <tbody><tr>
             	<td>IDE001</td>
             	<td>A</td>
             	<td>Non Sales</td>
             	<td>30</td>
             	<td>5</td>
             	<td>5</td>
             	<td>5</td>
             	<td>5</td>
             	<td>10</td>
             	<td>30000</td>
             	<td>5000</td>
             	<td>5000</td>
             	<td>5000</td>
             	<td>5000</td>
             	<td>10000</td>
             </tr>

                          <tr>
             	<td>IDE002</td>
             	<td>B</td>
             	<td>Non Sales</td>
             	<td>26</td>
             	<td>4</td>
             	<td>7</td>
             	<td>7</td>
             	<td>8</td>
             	<td>0</td>
             	<td>50000</td>
             	<td>7692.31</td>
             	<td>13461.5</td>
             	<td>13461.5</td>
             	<td>15384.6</td>
             	<td>0</td>
             </tr>

                          <tr>
             	<td>IDE003</td>
             	<td>C</td>
             	<td>Management</td>
             	<td>30</td>
             	<td>6</td>
             	<td>6</td>
             	<td>6</td>
             	<td>6</td>
             	<td>6</td>
             	<td>50000</td>
             	<td>10000</td>
            ...

JavaScript

//table2excel.js
;(function ( $, window, document, undefined ) {
    var pluginName = "table2excel",

    defaults = {
        exclude: ".noExl",
                name: "Table2Excel"
    };

    // The actual plugin constructor
    function Plugin ( element, options ) {
            this.element = element;
            // jQuery has an extend method which merges the contents of two or
            // more objects, storing the result in the first object. The first object
            // is generally empty as we don't want to alter the default options for
            // future instances of the plugin
            //
            this.settings = $.extend( {}, defaults, options );
            this._defaults = defaults;
            this._name = pluginName;
            this.init();
    }

    Plugin.prototype = {
        init: function () {
            var e = this;

            e.template = {
                head: "<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>",
                sheet: {
                    head: "<x:ExcelWorksheet><x:Name>",
                    tail: "</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>"
                },
                mid: "</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body>",
                table: {
                    head: "<table>",
                    tail: "</table>"
                },
                foot: "</body></html>"
            };

            e.tableRows = [];

            // get contents of table except for exclude
            $(e.element).each( function(i,o) {
                var tempRows = "";
                $(o).find("tr").not(e.settings.exclude).each(function (i,o) {
                    tempRows += "<tr>" + $(o).html() + "</tr>";
                });
               ...