Cara Export File Ke Excel Dengan HTML Dan Javascript

Halo selamat datang kembali di website tips dan trik Dumet School, jumpa lagi dengan saya dalam pembahasan tips dan trik seputar dunia website. Pada artikel sebelumnya kita sudah belajar bagaimana Cara Export File Ke Excel Dengan Plugin Jquery Dan PHP ada beberapa cara untuk export file ke dalam excel. Pada artikel kali ini saya akan memberikan tips Cara Export File Ke Excel Dengan HTML Dan Javascript ini adalah cara lain untuk export file ke dalam excel dengan menggunakan javascript atau kita tidak memerlukan plugin. Selain lebih simpel cara ini juga lebih cepat prosesnya di bandingkan dengan cara – cara lainnya.

Oleh sebab itu saya share di dalam artikel ini untuk tips dan trik nya yaitu Cara Export File Ke Excel Dengan HTML Dan Javascript tentunya untuk teman – teman supaya semakin banyak refrensi nya atau pilihannya. Tinggal pilih mana yang kalian pilih, baik langsung saja kita implementasikan. Teman – teman siapkan text editorya dan buat script html nya

<table border="1" cellspacing="0">
    <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Alamat</th>
        <th>Kota</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Eno</td>
        <td>Grenvile</td>
        <td>Jakarta</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Arul</td>
        <td>Tanah Abang</td>
        <td>Jakarta</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Joko</td>
        <td>Jurumudi</td>
        <td>Tangerang</td>
    </tr>
</table>
<button onclick="exportTableToCSV('members.csv')">Export</button>

<tr>

<th>Alamat</th>

</tr>

<tr>

<td>Grenvile</td>

<td>Jakarta</td>

</tr>

<tr>

<td>Tanah Abang</td>

<td>Jakarta</td>

</tr>

<tr>

<td>Jurumudi</td>

<td>Tangerang</td>

</tr>

</table>

<button onclick="exportTableToCSV('members.csv')">Export</button>

Kemudian kita berikan css nya

* {
    color: #2b2b2b;
    font-family: "Roboto Condensed";
}
th {
    text-align: center;
    color: #fff;
    padding: 10px;
    background: gray;
}
td{padding: 5px}
button {
    cursor: pointer;
    margin-top: 16px;
    padding: 5px
}

* {

color: #2b2b2b;

font-family: "Roboto Condensed";

}

th {

text-align: center;

color: #fff;

padding: 10px;

background: gray;

}

td{padding: 5px}

button {

cursor: pointer;

margin-top: 16px;

padding: 5px

}

Save dengan nama index.html dan jalankan pada browsernya, hasil layout nya seperti gambar di bawah ini

Kemudian kita tambahkan script javascript nya

function downloadCSV(csv, filename) {
    var csvFile;
    var downloadLink;

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

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // Create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Hide download link
    downloadLink.style.display = "none";

    // Add the link to DOM
    document.body.appendChild(downloadLink);

    // Click download link
    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(","));		
	}

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

function downloadCSV(csv, filename) {

var csvFile;

var downloadLink;

// CSV file

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

// Download link

downloadLink = document.createElement("a");

// File name

downloadLink.download = filename;

// Create a link to the file

downloadLink.href = window.URL.createObjectURL(csvFile);

// Hide download link

downloadLink.style.display = "none";

// Add the link to DOM

document.body.appendChild(downloadLink);

// Click download link

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(","));

}

// Download CSV file

downloadCSV(csv.join("\n"), filename);

}

Jika sudah save dan refres pada browser, dan klik export

Hasil akan sama pada saat di buka pada excel

Sangat simpel bukan, sekian pada artikel kali ini tentang Cara Export File Ke Excel Dengan HTML Dan Javascript kita jumpa kembali pada artikel yang akan datang. Terimakasih dan sampai jumpa, semoga bermanfaat.

Cara Export File Ke Excel Dengan HTML Dan Javascript

Facebook DUMET School

Konsultasi Gratis

Categories