Javascript Project to Export HTML Table and Download it as CSV File in Browser Full Project For Beginners



Welcome folks today in this blog post we will be exporting html table as csv file and download it in javascript. All the full source code of the application is shown below.




Get Started




In order to get started you need to make an index.html file and copy paste the following code






<button>Export HTML table to CSV file</button>






* {
    color: #2b2b2b;
    font-family: "Roboto Condensed";

th {
    text-align: left;
    color: #4679bd;

tbody > tr:nth-of-type(even) {
    background-color: #daeaff;

button {
    cursor: pointer;
    margin-top: 1rem;






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

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

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

    // File name = filename;

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

    // Make sure that the link is not displayed = "none";

    // Add the link to your DOM

    // Lanzamos;

function export_table_to_csv(html, 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++) 

    // Download CSV
    download_csv(csv.join("\n"), filename);

document.querySelector("button").addEventListener("click", function () {
    var html = document.querySelector("table").outerHTML;
    export_table_to_csv(html, "table.csv");

Leave a Reply