Export a table to csv

Assume that we have a table element and a button for exporting the table cells to CSV as following:

<table id="exportMe" class="table">
...
</table>

<button id="export">Export</button>

Export the table cells to CSV

The function below exports all the cells of table to CSV format. First, we select all the rows, loop over them and export each row to CSV.

In each row, we go through all cells, and retrive their text content.

const toCsv = function(table) {
// Query all rows
const rows = table.querySelectorAll('tr');

return [].slice.call(rows)
.map(function(row) {
// Query all cells
const cells = row.querySelectorAll('th,td');
return [].slice.call(cells)
.map(function(cell) {
return cell.textContent;
})
.join(',');
})
.join('\n');
};

Download the CSV

The function below creates a fake a element whose content is text and triggers the click event.
For more information, you can visit the Download a file post.

const download = function(text, fileName) {
const link = document.createElement('a');
link.setAttribute('href', `data:text/csv;charset=utf-8,${encodeURIComponent(text)}`);
link.setAttribute('download', fileName);

link.style.display = 'none';
document.body.appendChild(link);

link.click();

document.body.removeChild(link);
};

The last thing is to connect all pieces together. We just need to handle the click event of the Export button:

const table = document.getElementById('exportMe');
const exportBtn = document.getElementById('export');

exportBtn.addEventListener('click', function() {
// Export to csv
const csv = toCsv(table);

// Download it
download(csv, 'download.csv');
});

Demo

More

Previous
Drag and drop table row
Next
Get size of the selected file