Export HTML table as a CSV file on the front end

This demo illustrates how you can add a ‘Download to CSV’ button to your Formidable Forms Views and allow users to export a HTML table to a CSV file. This concept was adapted from an original article on CodexWorld to work with Formidable Forms Pro.

This added function can be used in a number of ways to allow front-end exporting of table data to CSV’s and is used in our Staff Timesheet tutorial.

The Demo: Export HTML table to CSV

NameEmailCountry
John Doejohn@gmail.comUSA
Stephen Thomasstephen@gmail.comUK
Natly Oathnatly@gmail.comFrance

The Code: Export HTML table to CSV

The demo above uses an HTML table however in our Staff Timesheet tutorial we use a Formidable Forms View to create a HTML table using form entries. If you need help doing this you can follow the Formidable Forms guide HERE.

Or check out our guides on Create An Invoicing System or Creating a Staff Timesheet.

Below we have an example of a HTML table:

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

Once the HTML table has been created you will need to add a Download button. If you are using a Formidable View to create your table, this can be placed in the ‘After Content‘ section of the view.

<button onclick="exportTableToCSV('members.csv')">Export HTML Table To CSV File</button>

The following JavaScript code contains 2 functions, downloadCSV() and exportTableToCSV(). We need to call the exportTableToCSV() function first which will take the data in the table and create a temporary CSV file on your web-server.

The second function will then call downloadCSV() which generates a download link and requests your browser to download the file.

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);
}
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();
}

Adding The Scripts

There are multiple ways you can add the JavaScript functions above to your site. The 2 easiest ways of doing so are:

  1. If you’re using a Formidable View, add the snippets directly to the ‘Before Content‘ section. Make sure you wrap them in <script></script> tags!
  2. Create a new JS file, upload it to your web-server and include a link to it in the ‘Before Content‘ section of your View (example below).

In both of our previous tutorials we have added a new JavaScript file called ‘table-export.js‘ and load it using the following code in the ‘Before Content‘ section of our view.

<script src="https://www.YourSite.com/wp-content/JS/table-export.js"></script>

Once you have the script and the Download button to your page you can then click the download button and the CSV file will be created and downloaded automatically.

Tip: In the tutorial for creating a Staff Timesheet we add the download button to the ‘After Content‘ section of our View and includ variables from a URL parameter to the file name. You can do this by adding the [get param=”start_date”] short-code to the download button name in the html.

For example:

<button onclick="exportTableToCSV('members.csv')">Staff_Timesheet_[get param="start_date"]_[get param="end_date"]</button>

This will enable you to customise the name of the download file based on any filters you have in place within your view.

Summary

Hopefully this will help anyone who is thinking of using Formidable Pro to create downloadable tables.

If you liked this tutorial, visit our blog for more ways to improve your websites and workflow.

Enjoy.

Let's Get Started

If you’re ready to get started with your next project click on the button below to try the Project Planner

TRY THE PROJECT PLANNER

You may also like…

DemosFormidableTutorials
25 Jun 2018

Formidable Forms – CSS Isolation Demo

This demo was created using Formidable Forms and CSS only hover styles to create an isolation style hover effect. This…
DemosFormidable
25 Jun 2018

Formidable Forms – Text Input Styles 2

Form Style Options: Set 2 - This is the second set of advanced form styling options for text input fields…
Tabbed SliderDemosFormidableTutorials
26 Jun 2018

Tabbed Slider: Formidable Forms

This demo was created using Formidable Forms and uses a JS powered tab / button slider instead of the standard…