Export HTML table to CSV using vanilla javascript

Question

I am trying to add a feature of csv download option in my website. It should convert the html table present in the website in to csv content and make it downloadable. Ive been searching through internet for a good plugin and found some usefule ones like http://www.dev-skills.com/export-html-table-to-csv-file/ But it uses php script to do the download part. I was wondering if there is a pure javascript library available to do this feature using server side softwares like node.js without the use of php??

Answer 1

Should work on every modern browser and without jQuery or any dependency, here my implementation :

// Quick and simple export target #table_id into a csv function download_table_as_csv(table_id, separator = ',') {     // Select rows from table_id     var rows = document.querySelectorAll('table#' + table_id + ' tr');     // Construct csv     var csv = [];     for (var i = 0; i < rows.length; i++) {         var row = [], cols = rows[i].querySelectorAll('td, th');         for (var j = 0; j < cols.length; j++) {             // Clean innertext to remove multiple spaces and jumpline (break csv)             var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ')             // Escape double-quote with double-double-quote (see https://stackoverflow.com/questions/17808511/properly-escape-a-double-quote-in-csv)             data = data.replace(/"/g, '""');             // Push escaped string             row.push('"' + data + '"');         }         csv.push(row.join(separator));     }     var csv_string = csv.join('\n');     // Download it     var filename = 'export_' + table_id + '_' + new Date().toLocaleDateString() + '.csv';     var link = document.createElement('a');     link.style.display = 'none';     link.setAttribute('target', '_blank');     link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));     link.setAttribute('download', filename);     document.body.appendChild(link);     link.click();     document.body.removeChild(link); } 

Then add your download button/link :

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a> 

CSV file is timedated and compatible with default Excel format.

Update after comments: Added second parameter "separator", it can be used to configure another character like ;, it's useful if you have user downloading your csv in different region of the world because they can use another default separator for Excel, for more information see : https://superuser.com/a/606274/908273