Export table di HTML ke file CSV menggunakan Javascript
Jurnalcode.com

Export table di HTML ke file CSV menggunakan Javascript


Jurnalcode : Sekarang saya akan membuat sebuah tutorial bagaimana cara Export table di HTML ke file CSV menggunakan Javascript . biasa nya cara iini digunakan saat kita akan mencetak sebuah laporan ke dalam bentuk csv .  jika ingim=n menggunakan  cara ini secara dinamis kita tinggal menggunakan bantuan php untuk melakukan pemanggilan data da di tampilkan ke dalam tabel html . baiklah sekarang langsung saja kita akan memulai bagaimana Export table di HTML ke file CSV menggunakan Javascript .

Langkah Pertama Silahkan Sediakan Tabel nya terlebih dahulu sebagai contoh :

<table>
    <tr>
        <th>Nama Lengkap</th>
        <th>Email</th>
        <th>Alamat</th>
    </tr>
    <tr>
        <td>Maz Koko</td>
        <td>[email protected]</td>
        <td>Pekanbaru</td>
    </tr>
    <tr>
        <td>Johan</td>
        <td>[email protected]</td>
        <td>Rokan Hulu</td>
    </tr>
    <tr>
        <td>Paijo</td>
        <td>[email protected]</td>
        <td>Rokan Hilir</td>
    </tr>
</table>
<hr>
<button onclick="exportTableToCSV('anggota.csv')">klik untuk export</button>

 

Setelah kita memiliki tabel html diatas maka kita lanjutkan dengan membuat function javascript nya

function downloadCSV(csv, filename) {
    var csvFile;
    var downloadLink;
    csvFile = new Blob([csv], {type: "text/csv"});
    downloadLink = document.createElement("a");
    downloadLink.download = filename;
    downloadLink.href = window.URL.createObjectURL(csvFile);
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
    downloadLink.click();
}

function exportTableToCSV(filename) {
    var csv = [];
	var rows = document.querySelectorAll("table tr");
    for (var i = 0; i < rows.length; i++) {
		var row = [], cols = rows[i].querySelectorAll("td, th");
		
        for (var j = 0; j < cols.length; j++) 
            row.push(cols[j].innerText);
        
		csv.push(row.join(","));		
	}
    downloadCSV(csv.join("n"), filename);
}

 

silahkan jalan kan script diatas dan liha hasilnya .  salam coder

 

 

 

.

Ayo Komentar