Mengekspor Tabel HTML ke Excel dengan Javascript

Mengekspor Tabel HTML ke Excel dengan Javascript - Hallo semuanya, mengekspor data ke Excel sangat berguna untuk merekam data pada hampir setiap aplikasi web. Fungsi ekspor membantu mengunduh data sebagai format file baru untuk penggunaan offline. Dalam kasus ini, format Excel sangat ideal untuk mengekspor data.

Sebagian besar metode yang digunakan untuk mengekspor data ke PHP adalah dengan metode server-side. Tetapi jika kita menginginkan solusi yang lebih baik dari sisi client, untuk mengekspor spreadsheet, bisa dilakukan menggunakak JavaScript.

Aktivitas ekspor data untuk client membuat aplikasi web menjadi sangat user friendly. Menggunakan JavaScript, kalian dapat dengan mudah mengimpor spreadsheet HTML tanpa melakukan refresh pada halaman. Dalam tutorial ini saya akan menunjukkan kepada kalian cara mengekspor spreadsheet HTML menggunakan JavaScript. Kalian dapat menggunakan fungsi ekspor JavaScript pada list anggota, produk, atau yang lainnya dengan menjadi format data Excel.


Mengekspor Tabel HTML ke Excel dengan Javascript

Kita akan membuat sebuah fungsi javascript dengan nama tableHtmlToExcel() dan mengekspor file menjadi  format XLS untuk Excel (.xls)

Parameter

-    idTable, wajib, untuk mengidentifikasi tabel mana yang harus kita ekspor
-    filename, tidak wajib, untuk memberi nama hasil file ekspor.


Kode Javascript

function tableHtmlToExcel(tableID, filename = ''){
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(tableID);
    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
   
    filename = filename?filename+'.xls':'excel_data.xls';
   
    downloadLink = document.createElement("a");
    
    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['\ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob( blob, filename);
    }else{
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
   
        downloadLink.download = filename;
       
        downloadLink.click();
    }
}

 

Tabel HTML

Pada tabel ini terdapat kumpulan data user dari berbagai negara.

<table id="tblData">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>john@gmail.com</td>
        <td>USA</td>
    </tr>
    <tr>
        <td>Michael Addison</td>
        <td>michael@gmail.com</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Sam Farmer</td>
        <td>sam@gmail.com</td>
        <td>France</td>
    </tr>
</table>

 

Tombol Ekspor

// ekspor dengan nama default
<button onclick="tableHtmlToExcel('tblData')">Export Table Data To Excel File</button>

// ekspor dengan nama tertentu
<button onclick="tableHtmlToExcel('tblData', 'members-data')">Export Table Data To Excel File</button>

 

Baiklah, demikian artikel kali ini yang membahas tentang cara ekspor tabel html ke excel dengan mudah. Sampai jumpa di artikel lainnya, terima kasih

20 Februari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat