Export HTML Table into Excel,CSV and Text Using TableExport

TableExport is a very popular jQuery plugin to export HTML data into Excel, CSV and Text format. Export help to store information into a file in a readable format. Excel, CSV and Text are very common formats to export data. You can also use a CSV file to store data in MySQL.

TableExport.js is a simple and easy-to-implement jQuery plugin that allows you to quickly and dynamically convert HTML tables to Excel spreadsheets .xls, .xlsx, comma separated values .csv, and plain text .txt by only one line of code.

I have only one limitation as like other exporting jQuery plugins we can only export visible HTML data, like if we are seeing 10 records in HTML table then i can export only 10 records in CSV, PDF,Excel etc.

You can also check other tutorials of export table data,

• Exporting a DataTable into PDF File
• Exporting a DataTable to CSV
• DataTables Export to Excel using HTML5
• Popular JavaScript and jQuery PDF Viewer Plugins

The tablexport jquery plugin has following export format option,

1. CSV
2. TXT
3. XLS
4. XLSX

tableexport.js jQuery plugin has following dependency file,

• jQuery.js
• FileSaver.js
• Bootstrap : This is optional
• Blob : This will use for OLD browser support.

Step 1: We need to include following TableExport plugin library files in head section of index.html.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.2.5/css/tableexport.min.css">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.3.5/js/tableexport.min.js"></script>

Step 2: Created HTML markup layout in index.html file.

<div class="tbl_container1">
<table id="listing" class="table table-bordered table table-hover" width="100%" cellspacing="0"><colgroup><col><col><col></colgroup>
<thead>
<tr>
<th>Name</th>
<th>Salary</th>
<th>Age</th>
</tr>
</thead>
<tbody id="emp_body"></tbody>
</table>
</div>

Step 3: Added some styles for table scroll-bar and export buttons into head section of index.html file.

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:450px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
.btn-toolbar {
     margin-left: 0px;
}

Step 4: Created AJAX request to fetch data from server using rest api.

<script type="text/javascript">
$(document).ready(function(){
	$.ajax({
		url: "https://dummy.restapiexample.com/api/v1/employees",
		async: true,
		dataType: 'json',
		success: function (data) {
			var tr;
			for (var i = 0; i < data.length; i++) {
				tr = $('<tr/>');
				tr.append("<td>" + data[i].employee_name + "</td>");
				tr.append("<td>" + data[i].employee_salary + "</td>");
				tr.append("<td>" + data[i].employee_age + "</td>");
				$('#emp_body').append(tr);
			}
			ExportTable();
		}
	});
});

as you can above code,I am using a dummy Rest Api of https://dummy.restapiexample.com to get all employee records,

also calling javascript ExportTable(); method for configure table-export plugin on HTML table, Now i will define this method.

Step 5: Configure tableExport on HTML table using the constructor.

$(document).ready(function(){
	function ExportTable(){
				$("table").tableExport({
				headings: true,                    // (Boolean), display table headings (th/td elements) in the <thead>
				footers: true,                     // (Boolean), display table footers (th/td elements) in the <tfoot>
				formats: ["xls", "csv", "txt"],    // (String[]), filetypes for the export
				fileName: "id",                    // (id, String), filename for the downloaded file
				bootstrap: true,                   // (Boolean), style buttons using bootstrap
				position: "well" ,                // (top, bottom), position of the caption element relative to table
				ignoreRows: null,                  // (Number, Number[]), row indices to exclude from the exported file
				ignoreCols: null,                 // (Number, Number[]), column indices to exclude from the exported file
				ignoreCSS: ".tableexport-ignore"   // (selector, selector[]), selector(s) to exclude from the exported file
			});
			}
});

Download Source Code & Demo: