Cara Export table di HTML ke file CSV dengan bantuan Javascript

Pada kesempatan kali ini ana kembali akan berbagi tips dan cara bahasa pemograman untuk sahabat setia semua dimana saja yang sedang mencari kebutuhan htmlnya agar memudahkan dalam kontrol kerja sehari - harinya.

untuk tutorial kali ini kita akan bahas bagaimana cara export tabel yang ada di html kedalam file CSV dengan menggunakan bantuan javascrip. Cara ini biasa digunakan untuk melakukan pencetakan sebuah laporan yang banyak kedalam format CSV. sebtulnya cara ini sudah banyak di bahas pada tutorial - tutorial para senior semua namun tidak ada salahnya kalo kita menglang kembali cara lama agar mengingatkan kembali memori kita yang sudah lama agar bisa kembali lebih fresh.

Jika kita menginginkan tampilan yang dinamis kita bisa menggunakan bahasa pemograman php untuk melakukan pemanggilan data tersebut sehingga bisa ditampilkan kedalam tabel html. karena satu sama lainnya sejatinya bahasa pemrograman itu saling terkait sehingga kita juga harus bisa mamahami fariabel yang dibutuhkan dalam pengoperasiannya agar tidak terjadi human error dalam prakteknya.

Baiklah untuk mempersingkat waktunya mari kita simak bersama kode dibawah ini dan siap ditempatkan pada kode yang sahabat punya sehingga bisa menyatu dengan baik dan benar sesuai dengan harapannya

Berikut kode untuk membuat export tabel di html ke file csv dengan bantuan javascrip.

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>Mister M</td>
        <td>mister@gmail.com</td>
        <td>kota raya</td>
    </tr>
    <tr>
        <td>joni</td>
        <td>joni@gmail.com</td>
        <td>kota baru</td>
    </tr>
    <tr>
        <td>ramlan</td>
        <td>ramlan23@gmail.com</td>
        <td>mampang</td>
    </tr>
</table>
<hr>
<button onclick="exportTableToCSV('member.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);
}

itulah deretan kode scrip untuk membuat exsport tabel dari html ke csv dengan bantuan javascrip. semoga artikel ini dapat memberikan pemahaman untuk kita semua dan berhasil guna dalam implementasi pemrograman. Mari saling berbagi untuk kemajuan pemrograman kedepannya agar lebih inovatif sesuai dengan tuntutan dan permintaan dunia usaha dan industri dalam berkarya untuk kepentingan bersama.

Demikian semoga artikel ini dapat membantu sahabat semua yang sedang mencari kode - kode yang ada pada artikel ana ini, semoga artikel ini berguna dan saran untuk kemajuannya bisa tulis dikolom komentar yang relevan dengan isi dan konten yang ada di blog ini.