I have the following code that takes an html table and exports it to excel.
<script lang="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script lang="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.3/xlsx.full.min.js"></script>
<script lang="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<style>
.borde{
border: 1px solid #000000;
}
.center{
text-align: center;
}
</style>
<table id="mytable" class="center">
<tr class="borde">
<td class="borde">ID</td>
<td class="borde">NOMBRE</td>
<td class="borde">APELLIDO</td>
</tr>
<tr class="borde">
<td class="borde">1</td>
<td class="borde">Hola</td>
<td class="borde">Chau</td>
</tr>
</table><br>
<button id="button-a">Create Excel</button>
<script>
var wb = XLSX.utils.table_to_book(document.getElementById('mytable'), {sheet:"Sheet JS"});
var wbout = XLSX.write(wb, {bookType:'xlsx', bookSST:true, type: 'binary'});
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
$("#button-a").click(function(){
saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), 'reporte.xlsx');
});
</script>
The table is exported like this:
What I want to know is if in the same script that creates the table I can pass variables so that the table that is created has borders in the tr and td, with other processes like excelphp could do it but here I do not get it and I can not find Something related. And let the table look like this.