Export Data in any format

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.

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.