Cara Export File Ke Excel Dengan HTML Dan Javascript

Halo selamat datang kembali di laman tips dan trik Dumet School, jumpa lagi dengan saya pada pembahasan tips dan trik seputar dunia laman. Di artikel sebelumnya kita telah belajar bagaimana Cara Export File Ke Excel Dengan Plugin Jquery Dan PHP ada beberapa cara bagi export file ke pada excel. Di artikel kali ini saya akan memberikan tips Cara Export File Ke Excel Dengan HTML Dan Javascript ini ialah cara lain bagi export file ke pada excel dengan menggunakan javascript atau kita tak memerlukan plugin. Selain lebih simpel cara ini pun lebih cepat prosesnya di bandingkan dengan cara – cara lainnya.

Oleh karena itu saya share di pada artikel ini bagi tips dan trik nya yaitu Cara Export File Ke Excel Dengan HTML Dan Javascript pastinya bagi teman – teman supaya semakin banyak refrensi nya atau pilihannya. Tinggal pilih mana yang kalian pilih, bagus seketika saja kita implementasikan. Teman – teman siapkan text editorya dan bikin script html nya

<table border=”1″ cellspacing=”0″><br />
    <tr><br />
        <th>No</th><br />
        <th>Nama</th><br />
        <th>Domisili</th><br />
        <th>Kota</th><br />
    </tr><br />
    <tr><br />
        <td>1</td><br />
        <td>Eno</td><br />
        <td>Grenvile</td><br />
        <td>Jakarta</td><br />
    </tr><br />
    <tr><br />
        <td>2</td><br />
        <td>Arul</td><br />
        <td>Tanah Abang</td><br />
        <td>Jakarta</td><br />
    </tr><br />
    <tr><br />
        <td>3</td><br />
        <td>Joko</td><br />
        <td>Jurumudi</td><br />
        <td>Tangerang</td><br />
    </tr><br />
</table><br />
<button onclick=”exportTableToCSV(‘members.csv’)”>Export</button>

<tr>

<th>Domisili</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

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

* {

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 di browsernya, hasil layout nya seperti gambar di bawah ini

Kemudian kita tambahkan script javascript nya

function downloadCSV(csv, filename) {<br />
    var csvFile;<br />
    var downloadLink;</p>
<p>    // CSV file<br />
    csvFile = new Blob([csv], {type: “text/csv”});</p>
<p>    // Unduh link<br />
    downloadLink = document.createElement(“a”);</p>
<p>    // File name<br />
    downloadLink.unduh = filename;</p>
<p>    // Create a link to the file<br />
    downloadLink.href = window.URL.createObjectURL(csvFile);</p>
<p>    // Hide unduh link<br />
    downloadLink.style.display = “none”;</p>
<p>    // Add the link to DOM<br />
    document.body.appendChild(downloadLink);</p>
<p>    // Click unduh link<br />
    downloadLink.click();<br />
}</p>
<p>function exportTableToCSV(filename) {<br />
    var csv = [];<br />
	var rows = document.querySelectorAll(“table tr”);</p>
<p>    for (var i = 0; i < rows.length; i++) {<br />
		var row = [], cols = rows[i].querySelectorAll(“td, th”);</p>
<p>        for (var j = 0; j < cols.length; j++)<br />
            row.push(cols[j].innerText);</p>
<p>		csv.push(row.join(“,”));<br />
	}</p>
<p>    // Unduh CSV file<br />
    downloadCSV(csv.join(“n”), filename);<br />
}

function downloadCSV(csv, filename) {

var csvFile;

sumber :kursuswebprogramming.com/blog/

(Visited 31 times, 1 visits today)

Leave a Reply Cancel reply