Datatables Excel HTML5
Datatables Excel HTML5
HTML
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<h1>Save Excel HTML5 test</h1>
<table id="myTable" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Publisher's blurb</th>
<th>First published</th>
<th>Publisher</th>
<th>No. of Pages</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr>
<td id="00" data-val='123'>To Kill a Mockingbird</td>
<td id="01" data-val=''>Harper Lee</td>
<td id="02" >Small-town Alabama, 1932. Based on Harper Lee's Pulitzer Prize winning book of 1961.Through the eyes of "Scout" a feisty six-year-old tomboy...</td>
<td id="03" data-val='123'>1960</td>
<td id="04" data-val='123'>J. B. Lippincott & Co.</td>
<td id="05" data-val='123'>281</td>
</tr>
<tr>
<td id="10" data-val='123'>1984</td>
<td id="11" data-val='123'> George Orwell</td>
<td id="12" data-val='123'>The year 1984 has come and gone, but George Orwell's prophetic, nightmarish vision in 1949 of the world we were becoming is timelier than...
CSS
#myTable td {
vertical-align: top;
}
JavaScript
$.extend(true, $.fn.dataTable.defaults, {
"lengthChange": false,
"pageLength": 100,
"orderClasses": false,
"stripeClasses": [],
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
exportOptions: {
columns: [0, 1, 2, 3, 4, 5],
format: {
body: function(data, row, column) {
var sel = "#" + row + column;
if( typeof $(sel).data('val') !== 'undefined'){
data = $(sel).data('val');
}
else{
data = data.replace(/<br\s*\/?>/ig, "\r\n");
data = data.replace(/<.*?>/g, "");
data = data.replace("&", "&");
data = data.replace(" ", "");
data = data.replace(" ", "");
}
return data;
}
}
},
customize: function(xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c[r^="A"]', sheet).attr( 's', '50' ); //<-- left aligned text
$('row c[r^="C"]', sheet).attr( 's', '55' ); //<-- wrapped text
$('row:first c', sheet).attr( 's', '32' );
}
}
]
});
$(document).ready(function() {
$('#myTable').DataTable();
});