Export Data in any format

Posted on Updated on

Hi All,

In this article i will be telling you how to export table data in any format like Excel, CSV, JSON, PDF, PNG.To implement this functionality I am using jQuery Library.

Credit : here.

pic

Plugin Features :

We can easily export any html tables to the following formats

  1. JSON
  2. XML
  3. PNG
  4. CSV
  5. TXT
  6. MS-Word
  7. Ms-Excel
  8. PDF

Script :

    $(document).ready(function(){
         $(".toggle").on("click",function(){
              var elm = $("#"+$(this).data("toggle"));
              if(elm.is(":visible"))
                  elm.addClass("hidden").removeClass("show");
              else
                  elm.addClass("show").removeClass("hidden");
              return false;
         });
    });

Button Panel :

<div class="pull-right">
	<button class="btn toggle" data-toggle="exportTable"><i class="fa fa-bars"></i> Export Data</button>
</div>
<div class="panel-body" id="exportTable" style="display:none">
	<div class="row">
		<div class="col-md-3">
			<div class="list-group border-bottom">
				<a href="#" class="list-group-item" onClick ="$('#contacts').tableExport({type:'json',escape:'false'});"><img src="{!URLFOR($Resource.tableExporter,'tableExporter/images/json.png')}" width="24"/> JSON</a>
				<a href="#" class="list-group-item" onClick ="$('#contacts').tableExport({type:'json',escape:'false',ignoreColumn:'[2,3]'});"><img src="{!URLFOR($Resource.tableExporter,'tableExporter/images/json.png')}" width="24"/> JSON (ignoreColumn)</a>
				<a href="#" class="list-group-item" onClick ="$('#contacts').tableExport({type:'json',escape:'true'});"><img src="{!URLFOR($Resource.tableExporter,'tableExporter/images/json.png')}" width="24"/> JSON (with Escape)</a>
			</div>
		</div>
		<div class="col-md-3">
			<div class="list-group border-bottom">
				<a href="#" class="list-group-item" onClick ="$('#contacts').tableExport({type:'xml',escape:'false'});"><img src="{!URLFOR($Resource.tableExporter,'tableExporter/images/xml.png')}" width="24"/> XML</a>
				<a href="#" class="list-group-item" onClick ="$('#contacts').tableExport({type:'txt',escape:'false'});"><img src="{!URLFOR($Resource.tableExporter,'tableExporter/images/txt.png')}" width="24"/> TXT</a>
			</div>
		</div>
		<div class="col-md-3">
			<div class="list-group border-bottom">
				<a href="#" class="list-group-item" onClick ="$('#contacts').tableExport({type:'csv',escape:'false'});"><img src="{!URLFOR($Resource.tableExporter,'tableExporter/images/csv.png')}" width="24"/> CSV</a>
				<a href="#" class="list-group-item" onClick ="$('#contacts').tableExport({type:'excel',escape:'false'});"><img src="{!URLFOR($Resource.tableExporter,'tableExporter/images/xls.png')}" width="24"/> XLS</a>
				<a href="#" class="list-group-item" onClick ="$('#contacts').tableExport({type:'doc',escape:'false'});"><img src="{!URLFOR($Resource.tableExporter,'tableExporter/images/word.png')}" width="24"/> Word</a>
			</div>
		</div>
		<div class="col-md-3">
			<div class="list-group border-bottom">
				<a href="#" class="list-group-item" onClick ="$('#contacts').tableExport({type:'png',escape:'false'});"><img src="{!URLFOR($Resource.tableExporter,'tableExporter/images/png.png')}" width="24"/> PNG</a>
				<a href="#" class="list-group-item" onClick ="$('#contacts').tableExport({type:'pdf',escape:'false'});"><img src="{!URLFOR($Resource.tableExporter,'tableExporter/images/pdf.png')}" width="24"/> PDF</a>
			</div>
		</div>
	</div>
</div>

Records Table :

<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">Contact Details</h3>
	</div>
	<div class="panel-body panel-body-table">
		<table id="contacts" class="table table-striped">
			<thead>
				<tr>
					<th>FirstName</th>
					<th>LastName</th>
					<th>Email</th>
					<th>Phone</th>
				</tr>
			</thead>
			<tbody>
			<apex:repeat value="{!contacts}" var="con">
				<tr>
					<td>{!con.FirstName}</td>
					<td>{!con.LastName}</td>
					<td>{!con.Email}</td>
					<td>{!con.Phone}</td>
				</tr>
			</apex:repeat>
			</tbody>
		</table>
	</div>
</div>

So That’s It.

7 thoughts on “Export Data in any format

    Lakshman said:
    August 11, 2015 at 4:04 am

    Hi Balkishan,

    Thanks for this Post,it is very useful for us.Can you please provide details description like vf page,controller

    Like

      balkishankachawa responded:
      August 11, 2015 at 4:11 am

      Thanks for your words.I have provided complete code you just need to copy paste this code between apex:page tags.But make sure you have used complete resources provided in this article.
      I did not use controller because my aim was to share an idea user can modify this according to their use.

      Like

    Sagar Pareek said:
    August 11, 2015 at 4:36 am

    🙂

    Like

    vinodk said:
    August 11, 2015 at 4:49 pm

    Thank you very much balkishankachawa for the Awesome post

    Liked by 1 person

    jayanth said:
    October 8, 2015 at 6:53 am

    Did anyone can send me the complete code? when I try to put all together getting some error

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s