I have a question about exporting an HTML table as an xlsx file. I did some work and now I can export it as an xls, but I need to export it as an xlsx.
Here is my jsFiddle: https://jsfiddle.net/272406sv/1/
Here is my HTML:
<table id="toExcel" class="uitable">
<thead>
<tr>
<th>Kampanya Basligi</th>
<th>Kampanya Türü</th>
<th>Kampanya Baslangiç</th>
<th>Kampanya Bitis</th>
<th style="text-align: center">Aksiyonlar</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Item in campaign.campaignList">
<td> Item.CampaignTitle </td>
<td> Item.CampaignHotelType </td>
<td> Item.CampaignHotelCheckInDate) </td>
<td>Item.CampaignHotelCheckOutDate</td>
<td style="text-align: center">
<button> Some Action </button>
</td>
</tr>
</tbody>
</table>
<button onclick="exceller()">EXCEL</button>
Here is my JavaScript code:
<script>
function exceller() {
var uri = 'data:application/vnd.ms-excel;base64,',
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>',
base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)))
},
format = function(s, c) {
return s.replace(/{(w+)}/g, function(m, p) {
return c[p];
})
}
var toExcel = document.getElementById("toExcel").innerHTML;
var ctx = {
worksheet: name || '',
table: toExcel
};
var link = document.createElement("a");
link.download = "export.xls";
link.href = uri + base64(format(template, ctx))
link.click();
}
</script>
Advertisement
Answer
You won’t be able to export it as XLSX without going back to the server. A XLSX file is a collection of XML files, zipped together. This means you do need to create multiple files. This is impossible to do with JS, client-side.
Instead, you should create a function retrieving the data from your HTML table and send that to you server. The server can then create the XLSX file for you (there are a bunch of libs available for that!) and send it back to the client for download.
If you expect to have a huge dataset, the XLSX creation on the server should be done as an async process, where you notify the user when it’s done (instead of having the user waiting for the file to be created).
Let us know which language you use on your server, and we’ll be able to recommend you some good libraries.