kali ini saya akan memposting cara mudah untuk export data tabel dari tampilan html menggunakan jquery. oke tanpa basa basi lagi saya akan langsung bagikan tipsnya disini. untuk export data gunakan metode window.open() untuk membuka aplikasi excel dan contentnya.
window.open(mimetype,replace);
mimetype = type dari dokumen yang akan anda export, defaultnya adalah text/html
replace = elemen atau halaman html yang akan anda export ke excel
<html>
<div id="dvData"> <table> <tr> <th>Column One </th> <th>Column Two</th> <th>Column Three</th> </tr> <tr> <td>row1 Col1</td> <td>row1 Col2</td> <td>row1 Col3</td> </tr> <tr> <td>row2 Col1</td> <td>row2 Col2</td> <td>row2 Col3</td> </tr> <tr> <td>row3 Col1</td> <td>row3 Col2</td> <td>row3 Col3</td> </tr> </table> </div> <br/> <input type="button" id="btnExport" value=" Export Table data into Excel " />
pada bagian tambahkan script berikut :
$("#btnExport").click(function(e) { window.open('data:application/vnd.ms-excel,' + $('#dvData').html()); e.preventDefault(); });
jika data pada tabel html anda terdapat spesial karakter, maka scriptnya di modifikasi seperti dibawah ini :
$("#btnExport").click(function(e) { window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('#dvData').html())); e.preventDefault(); });
script lengkapnya jadi seperti ini :
<html>
//tambahkan link untuk file jquery disini
$(document).ready(function(){
$("#btnExport").click(function(e) { window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('#dvData').html())); e.preventDefault(); });
});
<div id="dvData"> <table> <tr> <th>Column One </th> <th>Column Two</th> <th>Column Three</th> </tr> <tr> <td>row1 Col1</td> <td>row1 Col2</td> <td>row1 Col3</td> </tr> <tr> <td>row2 Col1</td> <td>row2 Col2</td> <td>row2 Col3</td> </tr> <tr> <td>row3 Col1</td> <td>row3 Col2</td> <td>row3 Col3</td> </tr> </table> </div> <br/> <input type="button" id="btnExport" value=" Export Table data into Excel " />
untuk mengetesnya silahkan buka browser, kemudian masukan url dimana kamu menyimpan
file contoh berikut, tekan tombol export table data into excel dan lihat hasilnya.
silahkan isi komentar anda disini
EmoticonEmoticon
Note: Only a member of this blog may post a comment.