Save HTML Table to Excel using jQuery
Friday, November 7th, 2008After a few hours work looking into this, this turned out really easy to implement using jQuery and server side PHP programming as follows:
On the client side the following HTML code needs adding to the page:
<form action="/SaveToExcel.php" method="post" target="_blank" onsubmit='$("#datatodisplay").val( $("<div>").append( $("#ReportTable").eq(0).clone() ).html() )'> <pre><input type="image" src="/images/icons/Floppy-48x48.png" width="12" height="12"></pre> <pre><input type="hidden" id="datatodisplay" name="datatodisplay" /> </form>
Note – variables used above – ReportTable is the id of the table you want to save and datatodisplay is a hidden variable used to post the table to the server.
The jQuery commands were added to the form’s onsubmit event but could easily be in your $(function(){}); fuction
The hard part here was getting all of the <table> HTML code. The standard jQuery .html() command gets the innerHTML and was cutting off the <table> HTML code. Getting all the HTML code was accomplished using the code $(“#datatodisplay”).val( $(“<div>”).append( $(“#ReportTable”).eq(0).clone() ).html() ) which effectively gets the outerHTML of the named HTML object (in this case the table we want to save to excel).
On the server side create a file called’SaveToExcel.php’ and add the following code:
<?php header("Content-type: application/vnd.ms-excel; name='excel'"); header("Content-Disposition: filename=export.xls"); // Fix for crappy IE bug in download. header("Pragma: "); header("Cache-Control: "); ?> <html> <head></head> <body><?=$_REQUEST['datatodisplay']?> </body> </html>
Updated: April 8, 2010 – modified to add fix for crappy IE download bug.