Export HTML Table to CSV with JavaScript | HTML 2 CSV | convert html table to csv | JS Hello friend's in this video I'm going to show you how to export html table data to csv file. I hope this video will help you to expertise your Javascript skill.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- tutorial link : https://youtu.be/2_Q9DBL-vZE -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html2csv</title>
<style>
table {
background-image: linear-gradient(to top left, rgb(202, 103, 103), rgb(231, 131, 131), rgb(228, 175, 175));
width: 100%;
}
td,
th {
border: 3px solid rgba(255, 255, 255, 0.589);
color: white;
letter-spacing: 0.1rem;
text-align: center;
font-size: 2rem;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>Subash</td>
<td>24</td>
<td>Male</td>
</tr>
<tr>
<td>Subham</td>
<td>21</td>
<td>Male</td>
</tr>
<tr>
<td>Tanya</td>
<td>26</td>
<td>Female</td>
</tr>
<tr>
<td>Geeta</td>
<td>22</td>
<td>Female</td>
</tr>
<tr>
<td>shyam</td>
<td>29</td>
<td>Male</td>
</tr>
<tr>
<td>Aditya</td>
<td>27</td>
<td>Male</td>
</tr>
</tbody>
</table>
<script>
let csv = [];
let tr = document.querySelectorAll("tr");
for (let i = 0; i < tr.length; i++) {
// console.log(tr[i]);
let cols = tr[i].querySelectorAll("th,td");
let csvRow = [];
for (j = 0; j < cols.length; j++) {
csvRow.push(cols[j].innerHTML)
}
csv.push(csvRow.join(","))
// console.log(csvRow.join(","));
}
console.log(csv.join("\n"));
let blob = new Blob([csv.join("\n")], { type: "text/csv" });
let ce = document.createElement("a");
ce.innerHTML = "Download";
ce.download = "codewithsundeep"
ce.href = URL.createObjectURL(blob);
document.body.appendChild(ce);
</script>
</body>
</html>