Export html table to csv file using vanilla javascript

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++) {
            row.push(cols[j].innerText);
        }
        
		csv.push(row.join(","));		
	}

	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;
	a.download = csv_name + '.csv';
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
}

// 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.

Export html table to csv file using vanilla javascript

Submit a Comment Cancel reply