Monday, 23 March 2015

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'))}"/>

        #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;

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

     <script type='text/javascript' language='javascript'>
        var j$ = jQuery.noConflict();
        function exportTableData(){
    <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">
                      <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>

        //action function redirects to another page.
        <apex:actionFunction name="goToExportPage" action="{!goToExportPage}"/>
        <apex:inputTextarea id="ExportDataString" value="{!exportDataString}" styleClass="exampleDataToExport" style="display:none"/>

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

<apex:page controller="ExportToExcel" contentType="application/"  title="Export To Excel" cache="true">

JQuery UI CDN :
Jquery JS :

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

                                                          Happy Learning !!


Post a Comment