Mengekspor Tabel HTML ke Excel dengan Javascript

20/02/2020    Maykhel David    108     Website

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

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More