Salam pagi agan-agan sekalian, sudah lama saya tidak buka blog saya ni, ternyata sudah banya sarang laba-labanya. hehehehehhe
Sesuai dengan judulnya, untuk kali ini saya akan share mengenai bagaimana cara merubah/export page HTML ke Excel dengan bantuan Jquery. Mungkin tutorial ini sudah banyak dimana-dimana tetapi saya share untuk case yang sering saya pakai untuk membuat laporan excel saya dengan data yang diambil dari HTML langsung. Berikut kutipannya.
1. Pastikan data HTML yang mau kita rubah sudah siap.
2. tambahkan script jquery ke dalam file HTML ini. berikut scriptnya :
<script>
var tableToExcel = (function() {
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]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})()
</script>
3. Setelah itu tambah kan pada baris setelah <body> sebuah id contoh :
<body><div id="testTable">
--isi html&php----
</body>
Jika agan-agan masih bigung berikut saya berikan filenya :
contoh gambar seperti dibawah ini :
