Mengexport data tabel HTML ke CSV menggunakan Javascript

Fitur export sangat berguna pada daftar data dalam aplikasi web. Ini membantu pengguna untuk men-download daftar data sebagai format file untuk digunakan secara offline. Dalam aplikasi web, CSV adalah format yang paling sering digunakan untuk mengexport data ke file. Mengekspor data ke CSV sangat mudah dan yang paling penting untuk membuat aplikasi web kamu user-friendly. Pada dasarnya, fungsi data export yang digunakan dalam daftar anggota, daftar barang/produk, atau daftar lainnya untuk men-download daftar data dalam format file offline.

Hanya dengan menggunakan JavaScript, kamu dapat dengan mudah mengexport data ke file CSV tanpa menggunakan plugin jQuery. Dalam tutorial ini, saya akan menunjukkan cara untuk mengexport data tabel HTML ke CSV menggunakan JavaScript. Di sini kita akan mengimplementasikan fungsi export untuk mengexport data anggota ke file CSV.

Kode Javascript

Kode JavaScript berikut ini  berisikan 2 fungsi, yang saya namai downloadCSV() dan exportTabelKeCSV(). Fungsi downloadCSV() akan mengambil data CSV dan menghasilkan link download untuk men-download data tabel HTML ke dalam file CSV.

function downloadCSV(csv, filename) {
    var fileCSV;
    var linkDonwload;

    // File CSV
    fileCSV = new Blob([csv], {type: "text/csv"});

    // Link download
    linkDonwload = document.createElement("a");

    // Nama file
    linkDonwload.download = filename;

    // Membuat link ke file
    linkDonwload.href = window.URL.createObjectURL(fileCSV);

    // Menyembunyikan link download
    linkDonwload.style.display = "none";

    // Menambahkan link ke DOM
    document.body.appendChild(linkDonwload);

    // Klik link download
    linkDonwload.click();
}

Fungsi exportTabelKeCSV() akan menghasilkan Data CSV dari tabel HTML dan mendownload data CSV sebagai file dengan menggunakan fungsi downloadCSV().

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

    // Download file CSV
    downloadCSV(csv.join("\n"), filename);
}

Kode HTML

<table class="table table-hover">
    <thead>
        <tr>
            <th>Nama</th>
            <th>Email</th>
            <th>Kota</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mukidi</td>
            <td>[email protected]</td>
            <td>Klaten</td>
        </tr>
        <tr>
            <td>Paiman</td>
            <td>[email protected]</td>
            <td>Jogja</td>
        </tr>
        <tr>
            <td>Sugiyem</td>
            <td>[email protected]</td>
            <td>Solo</td>
        </tr>
    </tbody>
</table>

Pada saat mengklik tombol, metode exportTabelKeCSV() ini dipanggil untuk mengexport data tabel ke file CSV. Dan juga, nama file yang diinginkan untuk men-download file CSV akan diteruskan ke fungsi tersebut.

<button class="btn btn-success" onclick="exportTabelKeCSV('anggota.csv')">Export data ke CSV</button>

Kesimpulan

Semoga dengan menggunakan kode JavaScript yang sederhana tersebut kamu dapat dengan mudah mengexport data tabel ke CSV. Kamu tidak perlu menggunakan plugin jQuery atau script server-side untuk export data ke CSV. Dan juga, kamu dapat menambahkan kolom dan baris tabel berdasarkan kebutuhanmu.