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…

DemosFormidable
25 Jun 2018

Formidable Forms – Radio & Checkbox Demos

Radio Button & Checkbox Styles These styles have been created using JS, CSS and Formidable Forms. Read the full tutorial…
decrease number in another formFormidableTutorials
26 Mar 2019

Decrease a number in another form

How to decrease numbers in another form This article will guide you on how to use a variable field in…
DemosTutorials
25 Jun 2018

CSS Isolation Demo

This demo was created using CSS only grow / hover styles to create an isolation style hover effect. This demo…