Export to excel in Salesforce from client side

From the last few weeks I was trying export in the salesforce from the visualforce page.
Salesforce has export functionality in the dashboards and reports.I does not have
export functionality by default for the pages.For every page for the export we have to write a new
page for the export.As we are using JqGrid in the salesforce pages for each grid we have to write
export functionality in a different page and this is pain.

Recently i heard the client side export using flash.
I did a little research and found a downloadify client side flash plugin to do export and this may help you.

Downloadify -  https://github.com/dcneiner/Downloadify
Jquery - http://jquery.com/

Upload Downloadify and JQuery as static resources in salesforce.
If you want JQuery UI you can also upload to static resources.

You can find demo at https://ugeshcrm-developer-edition.ap1.force.com/

Need to install flash player to for export.

Visualforce Page:

<apex:page sidebar="false" title="Export">

     <!-- Static Resource Includes: Jquery,Jqgrid libraries -->
    <apex:includeScript value="{!JSENCODE(URLFOR($Resource.JQuery,'js/jquery-1.5.2.min.js'))}"/>
    <apex:includeScript value="{!JSENCODE(URLFOR($Resource.JQuery,'js/jquery-ui-1.8.13.custom.min.js'))}"/>
    <apex:stylesheet value="{!JSENCODE(URLFOR($Resource.JQuery, 'css/redmond/jquery-ui-1.8.11.custom.css'))}"/>

    <apex:includeScript value="{!JSENCODE(URLFOR($Resource.Downloadify,'js/swfobject.js'))}"/>
    <apex:includeScript value="{!JSENCODE(URLFOR($Resource.Downloadify,'js/downloadify.min.js'))}"/>

    <!--Style to display portlets -->
    <style>

        #newspaper-b  {
            font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
            font-size: 12px;
            margin: 45px;
            width: 480px;
            text-align: left;
            border-collapse: collapse;
            border: 1px solid #69c;
        }
        #newspaper-b th  {
            padding: 15px 10px 10px 10px;
            font-weight: normal;
            font-size: 14px;
            color: #039;
        }
        #newspaper-b tbody   {
            background: #e8edff;
        }
        #newspaper-b td   {
            padding: 10px;
            color: #669;
            border-top: 1px dashed #fff;
        }
        #newspaper-b tbody tr:hover td   {
            color: #339;
            background: #d0dafd;
        }

    </style>

     <apex:sectionHeader title="Export table" />

    <div id="containerTable">
        <table id="newspaper-b" summary="2007 Major IT Companies' Profit">
            <thead>
                <tr>
                    <th scope="col">Company</th>
                    <th scope="col">Q1</th>
                    <th scope="col">Q2</th>
                    <th scope="col">Q3</th>
                    <th scope="col">Q4</th>
                </tr>
            </thead>
                <tfoot>
                <tr>
                    <td colspan="5"><em>The above data were fictional and made up, please do not sue me</em></td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Microsoft</td>
                    <td>20.3</td>
                    <td>30.5</td>
                    <td>23.5</td>
                    <td>40.3</td>
                </tr>
                <tr>
                    <td>Google</td>
                    <td>50.2</td>
                    <td>40.63</td>
                    <td>45.23</td>
                    <td>39.3</td>
                </tr>
                <tr>
                    <td>Apple</td>
                    <td>25.4</td>
                    <td>30.2</td>
                    <td>33.3</td>
                    <td>36.7</td>
                </tr>
                <tr>
                    <td>IBM</td>
                    <td>20.4</td>
                    <td>15.6</td>
                    <td>22.3</td>
                    <td>29.3</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script type='text/javascript' language='javascript'>
      var j$ = jQuery.noConflict();
      j$(document).ready( function () {
        var exportdata = j$('#containerTable').html();
        Downloadify.create('downloadify',{
              filename: function(){
                  return j$('#filename').val();
              },
              data: function(){
                  return exportdata;
              },
              swf: "{!URLFOR($Resource.downloadify,'media/downloadify.swf')}",
              downloadImage:"{!URLFOR($Resource.downloadify,'images/download.png')}",
              width: 100,
              height: 30,
              transparent: true,
              append: false
          });
      });
    </script>

    <form>
        <p style ="display:none">
            <label for="filename" >Filename</label><br />
            <input type="text" name="filename" value="exportfile.xls" id="filename" />
        </p>
        <p id="downloadify" style="margin-left:100px;">
            You must have Flash 10 installed to download this file.
        </p>
    </form>

</apex:page>

     

Feel free to comment and share your ideas in improving the post.