How to export html table to excel using javascript
Check https://github.com/linways/table-to-excel. Its a wrapper for exceljs/exceljs to export html tables to xlsx.
TableToExcel.convert(document.getElementById("simpleTable1"));<script src="https://cdn.jsdelivr.net/gh/linways/[email protected]/dist/tableToExcel.js"></script>
<table id="simpleTable1" data-cols-width="70,15,10">
<tbody>
<tr>
<td class="header" colspan="5" data-f-sz="25" data-f-color="FFFFAA00" data-a-h="center" data-a-v="middle" data-f-underline="true">
Sample Excel
</td>
</tr>
<tr>
<td colspan="5" data-f-italic="true" data-a-h="center" data-f-name="Arial" data-a-v="top">
Italic and horizontal center in Arial
</td>
</tr>
<tr>
<th data-a-text-rotation="90">Col 1 (number)</th>
<th data-a-text-rotation="vertical">Col 2</th>
<th data-a-wrap="true">Wrapped Text</th>
<th data-a-text-rotation="-45">Col 4 (date)</th>
<th data-a-text-rotation="-90">Col 5</th>
</tr>
<tr>
<td rowspan="1" data-t="n">1</td>
<td rowspan="1" data-b-b-s="thick" data-b-l-s="thick" data-b-r-s="thick">
ABC1
</td>
<td rowspan="1" data-f-strike="true">Striked Text</td>
<td data-t="d">05-20-2018</td>
<td data-t="n" data-num-fmt="$ 0.00">2210.00</td>
</tr>
<tr>
<td rowspan="2" data-t="n">2</td>
<td rowspan="2" data-fill-color="FFFF0000" data-f-color="FFFFFFFF">
ABC 2
</td>
<td rowspan="2" data-a-indent="3">Merged cell</td>
<td data-t="d">05-21-2018</td>
<td data-t="n" data-b-a-s="dashed" data-num-fmt="$ 0.00">230.00</td>
</tr>
<tr>
<td data-t="d">05-22-2018</td>
<td data-t="n" data-num-fmt="$ 0.00">2493.00</td>
</tr>
<tr>
<td colspan="4" align="right" data-f-bold="true" data-a-h="right" data-hyperlink="https://google.com">
<b><a href="https://google.com">Hyperlink</a></b>
</td>
<td colspan="1" align="right" data-t="n" data-f-bold="true" data-num-fmt="$ 0.00">
<b>4933.00</b>
</td>
</tr>
<tr>
<td colspan="4" align="right" data-f-bold="true" data-a-rtl="true">
مرحبا
</td>
<td colspan="1" align="right" data-t="n" data-f-bold="true" data-num-fmt="$ 0.00">
<b>2009.00</b>
</td>
</tr>
<tr>
<td data-b-a-s="dashed" data-b-a-c="FFFF0000">All borders</td>
</tr>
<tr>
<td data-t="b">true</td>
<td data-t="b">false</td>
<td data-t="b">1</td>
<td data-t="b">0</td>
<td data-error="#VALUE!">Value Error</td>
</tr>
<tr>
<td data-b-t-s="thick" data-b-l-s="thick" data-b-b-s="thick" data-b-r-s="thick" data-b-t-c="FF00FF00" data-b-l-c="FF00FF00" data-b-b-c="FF00FF00" data-b-r-c="FF00FF00">
All borders separately
</td>
</tr>
<tr data-exclude="true">
<td>Excluded row</td>
<td>Something</td>
</tr>
<tr>
<td>Included Cell</td>
<td data-exclude="true">Excluded Cell</td>
<td>Included Cell</td>
</tr>
</tbody>
</table>This creates valid xlsx on the client side. Also supports some basic styling. Check https://codepen.io/rohithb/pen/YdjVbb for a working example.
Only works in Mozilla, Chrome and Safari..
$(function() {
$('button').click(function() {
var url = 'data:application/vnd.ms-excel,' + encodeURIComponent($('#tableWrap').html())
location.href = url
return false
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</script>
<button>click me</button>
<div id="tableWrap">
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>