The Community forums are being phased out in favor of a new Slack group.
Add your email address below to get an invitation to join the community slack group

Slack Signup
Newsletter Optin
Help Desk

Download CSV - Front End


This Discussion is public


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 = filename;

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

    // Hide download link = "none";

    // Add the link to DOM

    // Click download link;

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++) 

    // 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.

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

Best wishes,



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,


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.


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.



Weird, right?


Discussion closed.