JSFiddle - React, Tailwind, and code Playground

by Diego La Monica

HTML

<table class=" aligncenter">
<tbody>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Phone Number</td>
<td>Email</td>
<td>Web Site</td>
<td>Export</td>
</tr>
<tr>
<td>Diego</td>
<td>La Monica</td>
<td>+39 333 7235382</td>
<td>me@example.com</td>
<td>http://diegolamonica.info</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>Joe</td>
<td>Average</td>
<td>+12 345 67890</td>
<td>joe@example.com</td>
<td>http://example.com</td>
<td><input type="checkbox" /></td>
</tr>
</tbody>
</table>
<a href="#" download="example.csv">Download data</a>

CSS

/* feel free to use your own CSS */

JavaScript

function table2CSV(){
	var dataURL = '',
		fieldSeparator = ';',
		textField = '"',
		lineSeparator = '\n',
		regExpTesto = /(")/g,
		regExp = /[";]/;
	
	$('table tr').each( function(){
		var dataRow = '';
		if($('input:checkbox', this).is(':checked') || $(this).is(':first-child')){
			$('td', this).not(':last').each( function(){
				var value = $(this).text();
				if(dataRow!='') dataRow += fieldSeparator;
				
				if(regExp.test(value)){
					value = textField + value.replace(regExpTesto, '$1$1') + textField;
				}
				dataRow += value;
				
			});
			if(dataURL != '') dataURL += lineSeparator;
			dataURL += dataRow;
		}
	});
	return 'data:text/csv;charset=utf-8;base64,' + btoa(dataURL);
}
function download(event){
    
   // event.preventDefault();
   $(this)
       .attr('href', table2CSV());   // Setting the dataURI
}

$('a').on('click', download);       // Attaching the event