Visualforce table Export to excelusing HTML Table & jQuery

This articles lets you know how to export data using HTML table & jQuery :

Apex Class :

public with sharing class ExportToExcel{
  
     public String exportDataString {get; set;}   

     public ExportToExcel() {} 

   //Apex Page refference methods from apex can used to redirect from one page to another page.
     public ApexPages.PageReference goToExportPage() {
        return Page.ExportToExcel;
     }   
}

Visual-force page: To Display Table

<apex:page controller="ExportToExcel" sidebar="false" title="Export">
     <!-- Static Resource Includes: Jquery and css files  -->
    <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'))}"/>

    <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" />

     <script type='text/javascript' language='javascript'>
        var j$ = jQuery.noConflict();
        function exportTableData(){
            j$(".exampleDataToExport").val(j$("#containerTable").html());
            goToExportPage();
        }
     </script>
    <apex:form >
        <a style="text-decoration: underline;cursor: pointer;margin-left:480px;font-weight:bold;font-size: 15px;" class="dummyCustomExport"  onclick="exportTableData()" title="export"><b>Export</b></a>

        <div id="containerTable">
            <table id="newspaper-b" class="dummyExportTableClass" 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>
                <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>
        //action function redirects to another page.
        <apex:actionFunction name="goToExportPage" action="{!goToExportPage}"/>
        <apex:inputTextarea id="ExportDataString" value="{!exportDataString}" styleClass="exampleDataToExport" style="display:none"/>
    </apex:form>
</apex:page>

Visual-force page: Export page(Export as Excel)

<apex:page controller="ExportToExcel" contentType="application/vnd.ms-excel#export.xls"  title="Export To Excel" cache="true">
  {!(exportDataString)}
</apex:page>

JQuery UI CDN :  https://code.jquery.com/ui/1.11.4/jquery-ui.js
Jquery JS : https://code.jquery.com/jquery-1.11.2.js

Please feel free to ask any question .....

                                                          Happy Learning !!

Read More