Question

I have a PHP page which generates an HTML table. At the bottom of the page, you can click a ‘submit’ button and the data from the table is sent to a jquery script called Table2CSV (link here) which takes the data, and submits to another php script for CSV export.

Ultimately, all of the action takes place here:

<form action="getCSV.php" method ="post" > 
<input type="hidden" name="csv_text" id="csv_text">
<input type="submit" value="Get CSV File" 
       onclick="getCSVData()"
</form>


<script type="text/javascript">

function getCSVData(){
 var csv_value=$('#example2').table2CSV({delivery:'value'});
 $("#csv_text").val(csv_value); 
}
</script>

What I’d like to do is generate the csv script without ever having to output the html table to the screen (via a link click on another page).

I think I ultimately need to simply change the javascript function above to call getCSVdata on page load then run getcsv.php but not sure how to do that exactly as I’m not very familiar with JS.

Any suggestions?

Answer 1

Without looking into the table2CSV function, I’d assume that it requires an HTML table element to pull its CSV data from. This means that one way or another the code for the HTML table must be generated if you need to use this script.

The easiest work-around would be to create the table inside a div with display: hidden set. This way the table2CSV function can still access the data inside the table, but the users won’t ever see it on the page.

Outside of that, you can of course always write your own server-side script to parse the data that would normally be returned in an HTML table into a CSV file.

The issue you’re looking at here is that the data is on the server, gets sent to the browser, and is then scraped by JS for submission to the server for parsing once again. Things would be more straight forward if either the server didn’t rely on the client for the data to parse or the client was able to parse the data on its own. Both options are definitely possible, but require writing your own CSV file creation script.

EDIT: Just read your comment above. If you want to have the CSV file available from the start, you’ll have to call getCSVData() after the DOM has been initialized. Assuming you aren’t pulling any data from images (which are loaded asynchronously), you can just:

$(document).ready(function() { getCSVData(); });

That will fire your CSV script as soon as the page is ready to be displayed, making it available to the user without an extra click.