Halo, ketemu lagi dengan saya, kali ini saya akan berbagi tutorial mengenai Cara Export HTML Ke XLS Dengan Javascript, Nah bagi kalian yang masih bingung cara export HTML ke XLS berikut langkah-langkahnya.
Langsung saja, kita buat dummy data nya dengan kode HTML berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <button id="btnExport">Export to xls</button> <br /> <br /> <div id="table_wrapper"> <table border="1" cellspacing="0" bordercolor="#222" id="list"> <tbody> <tr class="header"> <th>No</th> <th>Nama</th> <th>Alamat</th> </tr> <tr> <td>1</td> <td>Ucok</td> <td>Jakarta</td> </tr> <tr> <td>2</td> <td>Kosim</td> <td>Bogor</td> </tr> <tr> <td>3</td> <td>Ijah</td> <td>Bekasi</td> </tr> </tbody> </table> </div> </body> </html> |
Silakan kalian isikan data nya lebih banyak lagi, setelah itu kita buat fungsi export nya dengan kode Javascript berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(document).ready(function() { $("#btnExport").click(function(e) { e.preventDefault(); //getting data from our table var data_type = 'data:application/vnd.ms-excel'; var table_div = document.getElementById('table_wrapper'); var table_html = table_div.outerHTML.replace(/ /g, '%20'); var a = document.createElement('a'); a.href = data_type + ', ' + table_html; a.download = 'exported_table_' + Math.floor((Math.random() * 9999999) + 1000000) + '.xls'; a.click(); }); }); |
Kalo sudah, simpan terlebih dahulu, kemudian buka browsernya dan silahkan kalian klik tombol export, maka data pada HTML akan secara otomatis terdownload dengan format XLS.
Baik itulah tutorial tentang Cara Export HTML Ke XLS Dengan Javascript, semoga bermanfaat.
Selamat mencoba 🙂