Download CSV - Front End

Labels

This Discussion is public

Notifications

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>john@gmail.com</td><td>USA</td></tr><tr><td>Stephen Thomas</td><td>stephen@gmail.com</td><td>UK</td></tr><tr><td>Natly Oath</td><td>natly@gmail.com</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.

Brilliant - I was just looking for this and will go it a go shortly. Huge thanks for sharing !

Best wishes,

Stephen

Hi,

Is it possible in the view to show the title of the form please and if so how - many thanks for the help !

Best wishes,

Stephen

Hi Stephen,

The script is designed to only export the table and any contents within.

The easiest solution would be to add a new row to the top of the table with the name included.

You can hide this on the front end using some CSS if you don't want it included on the page but it will be included in the export.

Hope that helps.

Chris

Many thanks Chris - much appreciated

I tried loading this demo on my site and the export puts all the info on one row of the csv unlike copying the format of the table like your demo. any idea why this might happen?

Hi Hunter,

Do you have a link to your version or a screenshot?

The only issue i've found similar to yours is when using the Table Sorter plugin it adds all of the table headers into one cell in the CSV.

Thanks

Chris

Weird, right?


Attachment:

Reply to this Discussion