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.
Source code to export HTML Table to CSV with JavaScript
<!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>
- Convert HTML CSS to PDF with JavaScript | HTML to PDF
- Create a Working Contact Form Using HTML - CSS - JavaScript And AppScript | HTML Form to Email
- CRUD App Using HTML - CSS - JavaScript and IndexedDB API
- Reading Data From Google Sheet | Google Sheet to JSON and JSON to HTML | JavaScript and Apps Script
- How to Submit HTML Form Data to Google Sheets | Save Using doPost Method | AppScript | JavaScript
- Fetch and Read Excel Sheets Data in HTML Table with JavaScript
- JavaScript Todo List App with Local Storage | Todo App | Javascript Project
- Fetch and Display Multiple CSV Files in HTML Table with JavaScript | CSV to HTML | Read CSV
- Create a Math Quiz App using HTML CSS and JavaScript | JS Quiz App | JavaScript Project
- Speech to Text with JavaScript | Speech to Text App | JS
- Create a Text to Speech App with JavaScript | JS
- Export HTML Table to CSV with JavaScript | HTML 2 CSV | convert html table to csv | JS
- Validate and show Preview of Single or Multiple Image before upload in server with Javascript | Js
- Convert HTML to Canvas and Canvas to downloadable png / jpeg image | html2canvas | javascript | js
- Match Media Queries With JavaScript matchMedia Method
- Read CSV Files Data in HTML Table using JavaScript Fetch Method | CSV to HTML | JS | CSV File Reader
- How to read csv data in html table using Javascript ( JS )
No comments:
Post a Comment