Export Html Table to Excel Using jQuery Plugin

Export html table to excel using jQuery plugin is a hack which allows for exporting Html table data to an Excel Spreadsheet file. The plugin is developed against Chrome and other subsidized code that allow it to work in Firefox and Safari. Subsequently it’s a hack, so that’s not well maintained wherever but Chrome.

You may also like this

Touch Image Simple Lightbox jQuery Plugin

Password Strength Checker JavaScript

jQuery GDPR Compliant Cookie

Page Stack Navigation Template with CSS and JavaScript

Install – Bower

Install bower globally

npm install -g bower

Install jquery-table2excel and dependencies

bower install jquery-table2excel --save

Include jquery and table2excel in your page

25 Useful jQuery Plugins

<script src="bower_components\jquery\dist\jquery.min.js"></script>
<script src="bower_components\jquery-table2excel\dist\jquery.table2excel.min.js"></script>

Install – Legacy

Include jQuery and table2excel plugin:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>

Using the plugin

$(".exportToExcel").click(function(e){
	var table = $(this).prev('.table2excel');
	if(table && table.length){
		var preserveColors = (table.hasClass('table2excel_with_colors') ? true : false);
		$(table).table2excel({
			exclude: ".noExl",
			name: "Excel Document Name",
			filename: "myFileName" + new Date().toISOString().replace(/[\-\:\.]/g, "") + ".xls",
			fileext: ".xls",
			exclude_img: true,
			exclude_links: true,
			exclude_inputs: true,
			preserveColors: preserveColors
		});
	}
});

You can add the CSS class 'noExl' to any tr tags to ignore the specified table data while exporting.

<table class="table2excel">
	<thead>
		<tr class="noExl"><td>This shouldn't get exported</td><td>This shouldn't get exported either</td></tr>
		<tr><td>This Should get exported as a header</td><td>This should too</td></tr>
	</thead>
		<tbody>
			<tr>
				<td style="background-color: blue; color: purple;">data1a with a <a href="#">link one</a> and <a href="#">link two</a> and color won't be exported.</td>
				<td>data1b with a <img src="image_file.jpg" alt="image">.</td></tr>
			<tr>
				<td>data2a with a <input tyle="text" value="text value">.</td>
				<td>data2b with a <input tyle="text" value="second text value">.</td>
			</tr>
		</tbody>
		<tfoot>
			<tr><td colspan="2">This footer spans 2 cells</td></tr>
		</tfoot>
</table>
<button class="exportToExcel">Export to XLS</button>

File Information

File Size	50 KB
Last Update	2 Months Ago
Date Published	7 Years Ago
License	MIT

Crosswalk – Web Runtime for Ambitious HTML5 Applications