Download CSV - Front End

Est. Reading: 2 minutes
By: FDM Digital
Created: 07/02/2018
Category:
Difficulty: Beginner

Download CSV - Front End

×Warning: This tutorial was created 2114 days ago. Some of the information may be out of date with more recent versions of Formidable. Please proceed with caution and always perform a backup before adding custom code.

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 File

The 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: Table

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

Leave a Reply

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crosschevron-leftchevron-rightarrow-right