Export HTML table to CSV file
Imagine you have an HTML table, for example something like this:
<table>
<tr><th>Name</th><th>Age</th><th>Country</th></tr>
<tr><td>Geronimo</td><td>26</td><td>France</td></tr>
<tr><td>Natalia</td><td>19</td><td>Spain</td></tr>
<tr><td>Silvia</td><td>32</td><td>Russia</td></tr>
</table>
And you want to download it as a CSV table format.
First of all, you need to transform from HTML to CSV.
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
download_csv(csv.join("\n"), filename);
After that, you can download it using Blob and a link.
var csvFile;
var downloadLink;
// CSV FILE
csvFile = new Blob([csv], {type: "text/csv"});
// Download link
downloadLink = document.createElement("a");
// File name
downloadLink.download = filename;
// We have to create a link to the file
downloadLink.href = window.URL.createObjectURL(csvFile);
// Make sure that the link is not displayed
downloadLink.style.display = "none";
// Add the link to your DOM
document.body.appendChild(downloadLink);
// Launch
downloadLink.click();
Here a real example:



//VFdGeWFXOGdVR0ZzYjIxdklGUnZjbkpsY204Z1BHMXdZV3h2Ylc5QWFXaHRZVzR1WTI5dFBnbz0K
function table2csv(tableid) {
var csv = [];
var rows = document.querySelectorAll(‘#’ + tableid + ‘ 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(','));
}
return csv.join('\n');
}
Hi japanfever, absolutely yes, thanks for your comment, my first example was from an old code where there was not DOM. In both cases it works but yours is easier and faster when you already have the HTML table in the website. I have updated this post with your snippet, thanks xD