As we know a CSV file is a Comma Separated Values file that contains plain texts as a list of data. So, we gonna create a function that will take all data from an HTML table, separate all the td (table data/cell) or th (table header) with a comma and for every tr (table row) we’ll use a line break (newline).

We’ll use BLOB¬†to convert those raw data into a file-like object. Then we’ll create an URL for that object using¬†URL.createObjectURL() method. Next, we’ll create an “a” tag element, we put the BLOB object’s URL in it’s href attribute and give a file name in the download attribute. Finally, we’ll insert it in the dom, trigger its click event and remove it from the dom.


function export_table_to_csv (table, csv_name) {
	var csv = [];
	var rows = table.querySelectorAll("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++) {

	var csv_string = csv.join("\n");
	var csv_blob = new Blob([csv_string], {type: "text/csv"});
	var csv_href = window.URL.createObjectURL(csv_blob);

	var a = document.createElement('a');
	a.href = csv_href; = csv_name + '.csv';

// You can use the function like this - 
var table = document.getElementById('mytable');
export_table_to_csv(table, 'MyCSV');

Now we’ve got a working function that accepts an HTML table and a name for the CSV file, which will start downloading the CSV file.