Download CSV - Front End

This is a simple demo to allow users to download a table of content as a CSV from the front end.It can be used in a View or any other page / post to export any tables as CSV files.Step 1: Add / Upload JS FileThe following JavaScript code contains 2 functions, named downloadCSV() and exportTableToCSV().The downloadCSV() function takes CSV data and generates a download link to download an 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);
}

Step 2: TableThe members HTML table below contains some basic users data, like name, email, country. You can a view to create this type of table for each of your entries quite easily.

<table><tbody><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]</td><td>France</td></tr></tbody></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>

You can view a demo of how this works, along with instructions on how to implement this in your own Views, HERE.