I have been trying since long for the past 1 week over the Internet to find a help where I can convert a HTML page with complex table structure to be able to download in excel format without any luck.After struggling for a couple of days I was able to find a solution which I would like to share with you all

Lets say we have a MySQL database where we have stored the data. Now after retrieving the data we have displayed it in the web page below

You can see the complex nature of the table. Our aim is to whatever shape and size the table has, we should be able to export it to excel. For this we will use the help of JQuery. You can either download Jquery or add it directly from the url. Here we will use Google APIs to make a reference to JQuery and add it to the head section

1

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

Give the table an id ReportTable. This will help us append the entire table & append it to a hidden datatodisplay which will be submitted to the server for processing. We will use the .clone() method to copy the matched elements as well as all of their descendant elements and text nodes & duplicate elements on a page. the .eq() method constructs a new jQuery object from one element within that set. The supplied index identifies the position of this element in the set. Note that the supplied index is zero-based, and refers to the position of the element within the jQuery object, not within the DOM tree.

1
2
3

onsubmit='$("#datatodisplay").val( $("
<div>").append( $("#ReportTable").eq(0).clone() ).html() )'>
</div>

You can download the entire working code here.

This entry was posted on Saturday, December 31st, 2011 at 9:11 am and is filed under Ajatus. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.