Export HTML Table Data to Excel, CSV and Text using jQuery

Data export is a common feature to save data in a local file for further use. Generally we export data into our desired file format using server side languages and its very tedious. If you’re not prefer server side data export functionality, then you can handle data export at front-end using jQuery. The data export at front-end is very easy and fast. So if you’re looking for functionality to export data at front-end using jQuery, then you’re here at right place.

In this tutorial you will learn how to export HTML Table data into Excel, CSV and Text using jQuery. The tutorial explained in easy steps with live demo and also download source code of live demo.

Also, read:

• Export jQuery Datatable Data To PDF, Excel, CSV & Copy with PHP
• Export Data to Excel with PHP and MySQL
• Import CSV File into MySQL using PHP

As we have covered this tutorial with live demo to to export HTML Table data into Excel, CSV and Text using jQuery, so the file structure for this example is following.

• index.php
• custom_export.js

Steps1: Create MySQL Database Table
As we will display dynamic data record in HTML Table from MySQL database, so first first we will create MySQL table developers and then insert few records to display.

CREATE TABLE `developers` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `skills` varchar(255) NOT NULL,
  `address` varchar(255) NOT NULL,
  `gender` varchar(255) NOT NULL,
  `designation` varchar(255) NOT NULL,
  `age` int(11) NOT NULL,
  `image` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Steps2: Include jQuery and tableExport plugin
As we will handle HTML Table data export using jQuery plguin tableExport, so we will include jQuery and plugin files in index.php.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="tableExport/tableExport.js"></script>
<script type="text/javascript" src="tableExport/jquery.base64.js"></script>
<script src="js/custom_export.js"></script>	

Steps3: Create HTML Table with Data from MySQL
Then we will create HTML Table in index.php with dynamic data records from MySQL table developers to export table data. We will also design drop down list of export options to export data into different file types.

<table id="data_table" class="table table-striped">
	<thead>
		<tr>
			<th>Name</th>
			<th>Gender</th>
			<th>Age</th>	
			<th>Designation</th>
			<th>Address</th>
		</tr>
	</thead>
	<tbody>
		<?php 
		$sql_query = "SELECT name, gender, address, designation, age FROM developers LIMIT 10";
		$resultset = mysqli_query($conn, $sql_query) or die("database error:". mysqli_error($conn));
		while( $developer = mysqli_fetch_assoc($resultset) ) {
		?>
		   <tr>
		   <td><?php echo $developer ['name']; ?></td>
		   <td><?php echo $developer ['gender']; ?></td>
		   <td><?php echo $developer ['age']; ?></td>   
		   <td><?php echo $developer ['designation']; ?></td>
		   <td><?php echo $developer ['address']; ?></td>   
		   </tr>
		<?php } ?>
	</tbody>
</table>

Steps4: Implement HTML Table Data Export
Finally in custom_export.js, we will handle functionality to export HTML Table data into CSV, Excel and Text format using jQuery plugin tableExport. We will call jQuery plugin function .tableExport() on click event to export HTML table data.

$( document ).ready(function() {
	$(".export").click(function() {
		var export_type = $(this).data('export-type');		
		$('#data_table').tableExport({
			type : export_type,			
			escape : 'false',
			ignoreColumn: []
		});		
	});
});

You may also like:

• Build Live Chat System with Ajax, PHP & MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Invoice System with PHP & MySQL
• Push Notification System with PHP & MySQL
• Create Bootstrap Cards with PHP and MySQL
• Build Content Management System with PHP & MySQL
• Convert Unix Timestamp To Readable Date Time in PHP
• Ajax Drop Down Selection Data Load with PHP & MySQL
• Inventory Management System with Ajax, PHP & MySQL
• Drag and Drop File Upload using jQuery and PHP
• Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download