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
| Name | Country | |
|---|---|---|
| John Doe | john@gmail.com | USA |
| Stephen Thomas | stephen@gmail.com | UK |
| Natly Oath | natly@gmail.com | France |
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:
- 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!
- 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.
