Pada tutorial ini, kita akan belajar tentang cara export data tabel HTML ke excel menggunakan JavaScript pada client-side. Fungsionalitas ekspor data client-side menjadikan aplikasi web apa pun lebih mudah digunakan. Selain itu, kita dapat mengekspor atau mengunduh data tabel HTML dalam format excel tanpa refresh halaman.
Mengekspor data ke Excel sangat berguna untuk setiap perusahaan pada aplikasi web. Adakalanya kita perlu mengekspor data pada tabel html untuk dapat digunakan secara offline dan diekport dengan format csv.
Sebagai developer web, kita diharuskan melakukan itu di berbagai proyek langsung. Format Excel untuk mengekspor data dalam file sangat ideal di setiap perusahaan. Sebagian besar kita menggunakan metode server-side untuk mengekspor data ke excel menggunakan php. Namun jika anda ingin mendownload data tabel ke excel menggunakan client-side view maka dapat dilakukan dengan mudah menggunakan javascript.
Export Data Tabel HTML ke Excel
Pertama kita buat file HTML yang didalamnya terdapat sebuah tabel. Tabel HTML berikut ini berisi beberapa data pengguna dengan beberapa kolom seperti Name, Email, Age, Mobile.
<table id="tblexportData">
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
<th>Mobile</th>
</tr>
<tr>
<td>Robert</td>
<td>[email protected]</td>
<td>26</td>
<td>9999999999</td>
</tr>
<tr>
<td>Michael</td>
<td>[email protected]</td>
<td>24</td>
<td>9999999999</td>
</tr>
<tr>
<td>Julie</td>
<td>[email protected]</td>
<td>36</td>
<td>9999999999</td>
</tr>
<tr>
<td>Trevor</td>
<td>[email protected]</td>
<td>28</td>
<td>9999999999</td>
</tr>
</table>Setelah itu, kita buat tag script yang didalamnya terdapat kode javascript. Fungsi exportToExcel() akan menggunakan konversi data tabel HTML ke excel dan mengunduhnya sebagai file xls (.xls).
<script type="text/javascript">
function exportToExcel(tableID, filename = ''){
var downloadurl;
var dataFileType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById(tableID);
var tableHTMLData = tableSelect.outerHTML.replace(/ /g, '%20');
// Specify file name
filename = filename?filename+'.xls':'export_excel_data.xls';
// Create download link element
downloadurl = document.createElement("a");
document.body.appendChild(downloadurl);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTMLData], {
type: dataFileType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadurl.href = 'data:' + dataFileType + ', ' + tableHTMLData;
// Setting the file name
downloadurl.download = filename;
//triggering the function
downloadurl.click();
}
}
</script>Prasyarat:
- tableID – Required. Tentukan ID tabel HTML untuk mengekspor data.
- filename – Opsional. Tentukan nama file untuk mendownload data excel.
Kemudian kita buat tombol button untuk mengundah data hasil export tabel html ke excel.
<button onclick="exportToExcel('tblexportData')">Export Table Data To Excel File</button>Tombol di atas memicu fungsi exportToExcel() untuk mengunduh data tabel HTML menggunakan javascript.
Jika Anda ingin mengunduh atau mengekspor data dengan nama file khusus, Anda dapat meneruskan nama file Anda di fungsi exportToExcel() , seperti kode di bawah ini:
<button onclick="exportToExcel('tblexportData', 'user-data')">Export Table Data To Excel File</button>Full Code
<html>
<head>
<title>Export HTML Table Data to Excel using JavaScript | Tutorialswebsite</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<script type="text/javascript">
function exportToExcel(tableID, filename = ''){
var downloadurl;
var dataFileType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById(tableID);
var tableHTMLData = tableSelect.outerHTML.replace(/ /g, '%20');
// Specify file name
filename = filename?filename+'.xls':'export_excel_data.xls';
// Create download link element
downloadurl = document.createElement("a");
document.body.appendChild(downloadurl);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTMLData], {
type: dataFileType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadurl.href = 'data:' + dataFileType + ', ' + tableHTMLData;
// Setting the file name
downloadurl.download = filename;
//triggering the function
downloadurl.click();
}
}
</script>
</head>
<body>
<div class="container">
<table id="tblexportData" class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<td>Robert</td>
<td>[email protected]</td>
<td>26</td>
<td>9999999999</td>
</tr>
<tr>
<td>Michael</td>
<td>[email protected]</td>
<td>24</td>
<td>9999999999</td>
</tr>
<tr>
<td>Julie</td>
<td>[email protected]</td>
<td>36</td>
<td>9999999999</td>
</tr>
<tr>
<td>Trevor</td>
<td>[email protected]</td>
<td>28</td>
<td>9999999999</td>
</tr>
</tbody>
</table>
<button onclick="exportToExcel('tblexportData', 'user-data')" class="btn btn-success">Export Table Data To Excel File</button>
</div>
</body>
</html>Selamat kita telah berhasil melakukan export data tabel html ke excep dengan menggunakan javascript. Jika ada pertanyaan kalian bisa langsung tulis di kolom komentar di bawah ini.