Download To Excel HTML Table

Download To Excel HTML Table

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<dl class="dropdown">
  <dt>
    <a href="#" id="Sel">SELECT  
    </a>
    </dt>
  <dt>
     <ul>
<li><div>
    <input type="checkbox" value="1" id="Name"/>
    <label for="Name">Name</label>
 </div></li>
<li><div>
   <input type="checkbox" value="2" id="Address"/>
   <label for="Address">Address</label>
</div></li>
<li><div>
   <input type="checkbox" value="3" id="City"/>
   <label for="City">City</label>
</div></li>
<li><div>
    <input type="checkbox" value="4" id="Country"/>
    <label for="Country">Country</label>
</div></li>

</ul> 
    </dt>
</dl>

<table id="myTable" cellspacing="0" cellpadding="0">
  <thead>
    <tr class="headercell">
      <td>Name</td>
      <td>Address</td>
      <td>City</td>
      <td>Country</td>
    </tr>
  </thead>
  <tbody>
    <tr class="datacell">
      <td>Anand</td>
      <td>2404/71</td>
      <td>Mohali</td>
      <td>India</td>
    </tr>
    <tr class="datacell">
      <td>Nilesh</td>
      <td>236/10</td>
      <td>Chandigarh</td>
      <td>India</td>
    </tr>
    <tr class="datacell">
      <td>Rahul</td>
      <td>A 71 Radhepuri</td>
      <td>New Delhi</td>
      <td>India</td>
    </tr>
    <tr>
      <td>Pratius</td>
      <td>Trishna Apartment-740</td>
      <td>Hydrabad</td>
      <td>India</td>
    </tr>
  </tbody>
</table>
<input id="btnExport" type="button" value="Export to excel">

CSS

body {
    font-family: calibri;
  }
  
  dt {
    display: block;
    border: 1px solid #ddd;
  }
  
  ul {
    list-style: none;
    padding: 0;
  }
  
  table {
    padding: 0;
    border-collapse: collapse;
  }
  
  table thead td {
    background-color: #f2f2f2;
    font-weight: bold;
  }
  
  table td {
    border: 1px solid #d7d7d7;
    padding: 5px;
  }

JavaScript

$(".dropdown ul").hide();
$('input[type="checkbox"]').attr('checked', 'checked');

$(".dropdown dt a").on('click', function() {
  $(".dropdown ul").slideToggle('fast');
});

$('input[type="checkbox"]').change(function() {
  selectedVal = $(this).closest('div').find('label').text();
  var i = $("#myTable thead .headercell td:contains(" + selectedVal + ")").index() + 1;
  $('td:nth-child(' + i + ')').toggle();
});

$("#btnExport").click(function (e) {
    //alert('hello');
    //getting values of current time for generating the file name
    var dt = new Date();
    var day = dt.getDate();
    var month = dt.getMonth() + 1;
    var year = dt.getFullYear();
    var hour = dt.getHours();
    var mins = dt.getMinutes();
    var postfix = day + "." + month + "." + year + "_" + hour + "." + mins;
    //creating a temporary HTML link element (they support setting file names)
    var a = document.createElement('a');
    //getting data from our div that contains the HTML table
    var data_type = 'data:application/vnd.ms-word;charset=utf-8';
    
    var table_html = $('#myTable').find(':not(:visible)').remove().end()[0].outerHTML;
                             
//    table_html = table_html.replace(/ /g, '%20');
    table_html = table_html.replace(/<tfoot[\s\S.]*tfoot>/gmi, '');
    
    var css_html = '<style>td {border: 0.5pt solid #c0c0c0} .tRight { text-align:right} .tLeft { text-align:left} </style>';
//    css_html = css_html.replace(/ /g, '%20');
    
    a.href = data_type + ',' + encodeURIComponent('<html><head>' + css_html + '</' + 'head><body>' + table_html + '</body></html>');
    
    //setting the file name
    a.download = 'exported_table_' + postfix + '.xls';
    //triggering the function
    a.click();
    //just in case, prevent default behaviour
    e.preventDefault();
});