Home > JavaScript > Export HTML Table to CSV Using JavaScript

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

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.

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.

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.

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.

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.

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.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

14 thoughts on “Export HTML Table to CSV Using JavaScript”

  1. Hi!
    Thank you so much for the code. I just have one question – can you help me change it so that the Header of the table is ignored? I only want the Data in the csv file; so the first line of the csv file must be the first record.

    Reply
  2. If someone wants to export cell where data is number_format(), here is nice addition:
    .split(‘,’).join(”)


    for (var j = 0; j < cols.length; j++) {
    row.push(cols[j].innerText.split(',').join(''));
    }

    Reply
  3. Hi,
    I copy and paste all code in the new HTML file but it does not work. I don’t see the button to click and download the table in the CSV format. Do you have a complete code example? Thanks in advance,

    Reply

Leave a Comment