Export HTML Table to CSV Using JavaScript

In this tutorial, we will learn how you can export (download) HTML table to CSV file using javascript. Firstly, we have to convert HTML table rows into a CSV file then we will export (download) it with the help of the javascript function.

Let’s get started!

Export HTML Table to CSV

To export the HTML table to a CSV file, we will follow the below points.

• Create a well structured HTML table with using proper <table> tags like: <tr>, <th>, <td>. Make sure your all table tags are closed.
• Will make export function to convert HTML to CSV
• Will make download function to download the CSV file
• Click event call when click on download button

Also Read: How to Convert HTML Table to PDF Using JavaScript?

So, let’s start with the first step to creating an HTML table.

Step 1: Create HTML Table with Well Structured

We will use the <table%gt; tag to create an HTML table and show the data in it as you want. To style the data in the table with rows and columns, we will use <tr>, <th>, and <td> tags.

<table>
    <tr>
        <th>Name</th>
        <th>Class</th>
        <th>Roll No</th>
        <th>Section</th>
    </tr>
    <tr>
        <td>Robert Sen</td>
        <td>12th</td>
        <td>34</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Vicky Thakur</td>
        <td>10th</td>
        <td>13</td>
        <td>C</td>
    </tr>
    <tr>
        <td>Ribika Mattu</td>
        <td>11th</td>
        <td>16</td>
        <td>D</td>
    </tr>
    <tr>
        <td>Simran Singh</td>
        <td>9th</td>
        <td>26</td>
        <td>A</td>
    </tr>
</table>

Step 2: Create Export Function with JavaScript

Now, we will create a javascript function to convert HTML table rows (<tr>) data into CSV format. For this, we have to target each row of the table. Then we will loop through the rows and get the data of table cells in each row.

<script>
function htmlToCSV(html, filename) {
	var data = [];
	var rows = document.querySelectorAll("table 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);
        }
		        
		data.push(row.join(",")); 		
	}

	downloadCSVFile(data.join("\n"), filename);
}
</script>

The above function will make new array data set with respective columns and rows. First, we make row data separated by a comma then pass the data variable in the downloadCSVFile() function with each row start with a new line.

Step 3: Create Download File Function with JavaScript

In this function, we will create a new element by javascript to download the CSV file. First, we will use document.createElement() to create an anchor (<a>) element then we will assign the attribute (href in our case) value using window.URL.createObjectURL(). But this would be hidden element in the body tag.

And finally, hit that element by click() function. See the code below.

<script>
function downloadCSVFile(csv, filename) {
	var csv_file, download_link;

	csv_file = new Blob([csv], {type: "text/csv"});

	download_link = document.createElement("a");

	download_link.download = filename;

	download_link.href = window.URL.createObjectURL(csv_file);

	download_link.style.display = "none";

	document.body.appendChild(download_link);

	download_link.click();
}
</script>

Step 4: Call Click Event on Download Button

This is just a simple event trigger call when some click on the download button then execute the above both functions and download the file for you.

<script>
document.getElementById("download-button").addEventListener("click", function () {
	var html = document.querySelector("table").outerHTML;
	htmlToCSV(html, "students.csv");
});
</script>

In the above code, we target the download button with ID and trigger the click() event when clicking on the download button. It will get the table content and pass it into the htmlToCSV() function to convert the table rows into CSV format.

Also Read: How to Convert HTML to PDF Using JavaScript?

Frequently Asked Questions

What is CSV File?

A CSV (comma-separated value) file is a text file that uses a comma delimiter to separate each value. It makes one line record set, which means each line of the file is a row of table data. In the CSV file, each line will have the same number of fields, and you can say it tabular data.

What is Blob?

Blob is a data type which has file like immutable object. It can read and store text and binary data then it will represent you in a human-readable format.

Can I create any element with createElement() function?

Yes, you can create any element with createElement() function. It create the element in HTML document with specified the HTML tag name. It will also create an element if tag name not recognized by HTML.

So, That's it!

Hope you understand all the code about exporting HTML table data to CSV format using javascript. But if you still have any questions please ask me in the comment section. I'll respond to you as soon as possible.