Export Html Table to Excel Using jQuery Plugin

Export Html Table to Excel Spreadsheet Using jQuery

Export Html Table to Excel Spreadsheet 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

JavaScript Progress Bar with Percentage

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

Responsive Basic Table jQuery Plugin
<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 Size50 KB
Last Update2 Months Ago
Date Published7 Years Ago
LicenseMIT

jQuery Responsive Full screen Image Gallery – Story Show Gallery Plugin