JSFiddle - React, Tailwind, and code Playground

by nilloc

HTML

<table id="myTable" class="table table_sortable pop_cvb_tbl"><thead><tr><th><a class="" aria-describedby="GEOGRAPHY_SUBTYPE0" href="/population-coverage/NoIg8gRgVgpgxgFxAGhHAFgQwE4IBoCC/AHgJYDOKIBc2A9mWQAQDiMtA5tpgA7oC/elACYwEmEgBtKABVrcAruMwIStAHZCRY/8QDEJCGNkoA5NTErs2nHv0oBhWnNXKYF/VN0x8Dd2gFsfBuBJMSVRsGG5aXAAVPm4/zVCjMCHF4kDJIhAAhAVRmAFEwZgAlAik/ACQBNAH0AZQBVTKiKqTzKdNwwbGFDVAA/RPJrbNrkIXs0JXXF9HpAo2lEQtJHWDi5/eHKpxcUYAekY5hcplfzBuZTU7YJhVQRx/GCpgcI5J-KQMVQTsKgCYABgBGb4gAC6Q/A.html">Geo Subtype</a></th><th><a class="" aria-describedby="US_CENSUS1" href="/population-coverage/NoIg8gRgVgpgxgFxAGhHAFgQwE4IBoCC/AHgJYDOKIBc2A9mWQAQDiMtA5tpgA7oC/elACYwEmEgBtKABVrcAruMwIStAHZCRY/8QDEJCGNkoA5NTErs2nHv0oBhWnNXKYF/VN0x8Dd2gFsfBuBJMSVRsGG5aXAAVPm4/zVCjMCHF4kDJIhAAhAVQAVQBlAH1bAFE/jfILKdNwwbGFDVAAREvzbKrkIRs0JXXF/9BpAo2lEQtI7WDi5eHKpxcUYAekYhkcp/lfzBuZTU7YJhVQRxGAE0YHDWSfykDFUE/7Y4AmAAYARgeQAF0gA.html">US Census</a></th><th><a class="" aria-describedby="CTAHA_POP_AVG2" href="/population-coverage/NoIg8gRgVgpgxgFxAGhHAFgQwE4IBoCC/AHgJYDOKIBc2A9mWQAQDiMtA5tpgA7oC/elACYwEmEgBtKABVrcAruMwIStAHZCRY/8QDEJCGNkoA5NTErs2nHv0oBhWnNXKYF/VN0x8Dd2gFsfBuBJMSVRsGG5aXAAVPm4/zVCjMCHF4kDJIhAAhAVRbKIIACQIAfSk/wKWKCADVmSnTcMGxhQ1QAEQBRAGVbOrk/IVs0JXXF9FpAo2lEQtL7WDi5eHKpxcUY/AekYJqcplfzBuZTU7YJhVQRxGAE0YHB2/SfykDFUE7S4AmAAYARjeQAF0gA.html">CTAHA Pop Avg</a></th><th><a class="" aria-describedby="PCT_OF_POPULATION3" href="/population-coverage/NoIg8gRgVgpgxgFxAGhHAFgQwE4IBoCC/AHgJYDOKIBc2A9mWQAQDiMtA5tpgA7oC/elACYwEmEgBtKABVrcAruMwIStAHZCRY/8QDEJCGNkoA5NTErs2nHv0oBhWnNXKYF/VN0x8Dd2gFsfBuBJMSVRsGG5aXAAVPm4/zVCjMCHF4kDJIhAAhAVQpWyiAfTBtAqk/wKQBVABkCKIBJMCNKdNwwbGFDVAARAFE/AZVtmuQguzQldcX1OkCjaURC04dYOLl4/cqnFxRgB6Rln5ymV-MG5lNTtgmFVBHEY/ATRgcQ5J-KQMVQTs7gCYABgBGb4gAC6Q/A.html">% Of Pop</a></th></tr></thead><tbody><tr><td>Fairfield</td><td>552000</td><td>220631</td><td>40</td></tr><tr><td>Hartford</td><td>505811</td><td>148656</td><td>29.4</td></tr><tr><td>New...

CSS

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
* {
    box-sizing: border-box;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}


table {
    background-color: transparent;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 0 1.5em;
    width: 100%;
}
table {
    margin: 0 0 1.5em;
    width: 100%;
}
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
.table_sortable {
    font-size: 12px;
}

JavaScript

function tableToExcel() {
  var uri = 'data:application/vnd.ms-excel;base64,';
  var 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>';
  var base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) };
  var format = function(s, c) {
  	return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; });
  };
  
  console.log('clickety');
  
  return function(table, name) {
  	if (table.nodeType){
    	table = document.getElementById("myTable");
      console.log(table);
    }
  	var ctx = {worksheet: name || 'myTable', table: myTable.innerHTML};
  	window.location.href = uri + base64(format(template, ctx));
  }
}