Export HTML Table Data to CSV using JavaScript

The export feature is very useful on data list in a web application. It helps the user to download data list as a file format for offline use. In the web application, CSV is a most used format for exporting data to a file. Export data to CSV is very easy and most important to make your web application user-friendly. Basically, the export data functionality is used in the member list, product list, or other lists to download data list in file format.

Using JavaScript, you can easily export data to CSV file without using any jQuery plugin. In this tutorial, we’ll show you how to export HTML table data to CSV using JavaScript. Here we’ll implement export functionality for export members data to CSV file.

JavaScript Code

The following JavaScript code contains 2 functions, named downloadCSV() and exportTableToCSV().
The downloadCSV() function takes CSV data and generate download link to download HTML table data in a CSV file.

function downloadCSV(csv, filename) {
    var csvFile;
    var downloadLink;

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

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // Create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Hide download link
    downloadLink.style.display = "none";

    // Add the link to DOM
    document.body.appendChild(downloadLink);

    // Click download link
    downloadLink.click();
}

The exportTableToCSV() function creates CSV data from table HTML and download CSV data as a file by using the downloadCSV() function.

function exportTableToCSV(filename) {
    var csv = [];
    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);
        
        csv.push(row.join(","));        
    }

    // Download CSV file
    downloadCSV(csv.join("\n"), filename);
}

HTML Code

The members HTML table contains some basic users data, like name, email, country.

<table>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>[email protected]</td>
        <td>USA</td>
    </tr>
    <tr>
        <td>Stephen Thomas</td>
        <td>[email protected]</td>
        <td>UK</td>
    </tr>
    <tr>
        <td>Natly Oath</td>
        <td>[email protected]ail.com</td>
        <td>France</td>
    </tr>
</table>

On clicking the button, exportTableToCSV() method is called to export table data to CSV file. Also, the desired filename for download CSV file is passed to this function.

<button onclick="exportTableToCSV('members.csv')">Export HTML Table To CSV File</button>