Monday, February 10, 2014

Export data tabel ke excel dengan jquery

Tags

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

langkah pertama buat dokumen HTML,silahkan simpan dengan nama apa saja.

<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  
  
<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.