In this tutorial, I will show you, step-by-step, how to integrate a jQuery plugin to export your HTML tables to CSV / Excel files. It can be really useful if you don’t want to spend some time in making a backend (in PHP for example) just for exporting your table data.

First of all, check the demo of the what we will achieve during the tutorial :

See Demo

To export an HTML table to a CSV file, we can have the choice between 2 plugins :

I’ve tested both and in this tutorial, we will use TableExport.js. I wouldn’t recommend jQuery Table2Excel for two reasons. The first one is that it is not maintained anymore and the second is that the export doesn’t seem to work well on Mac with softwares like Numbers (the Excel by Apple).

So let’s start with TableExport.js

Download TableExport.js from Github, here. Extract it and transfer the content of dist/ including the css/, js/ and img/ folders to your website.

TableExport requires to also add another file called FileSaver.js to work. No need to download it, we will simply use a CDN to import it in our website.

So, in your HTML, include the CSS and the JS (+ jQuery) like this :

<!doctype html>
<html lang="en">
	<head>
	    <!-- Required meta tags -->
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	    <link rel="stylesheet" href="css/tableexport.min.css">
	    <title>jQuery Table to CSV / Excel - Demo</title>
	</head>
    <body>
	    
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="js/jquery.min.js"></script>
        
        <!-- Import the plugins -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
        <script src="js/tableexport.min.js"></script>

    </body>
</html>

Now, create an HTML table that we will later export using our Javascript plugin. Make sure to add an ID to your table (in my case “table-to-export”) that we will later use in our jQuery code. 

<table id="table-to-export" class="table table-striped">
    <tr>
	    <th>ID</th>
	    <th>Username</th>
	    <th>Email</th>
	    <th>Rank</th>
    </tr>
    <tr>
	    <td>#1</td>
	    <td>Anais</td>
	    <td>[email protected]</td>
	    <td>User</td>
    </tr>
    <tr>
	    <td>#2</td>
	    <td>James</td>
	    <td>[email protected]</td>
	    <td>User</td>
    </tr>
    <tr>
	    <td>#3</td>
	    <td>Laura</td>
	    <td>[email protected]</td>
	    <td>Admin</td>
    </tr>
    <tr>
	    <td>#4</td>
	    <td>Paul</td>
	    <td>[email protected]</td>
	    <td>Moderator</td>
    </tr>
    <tr>
	    <td>#5</td>
	    <td>Sonia</td>
	    <td>[email protected]</td>
	    <td>User</td>
    </tr>
    <tr>
	    <td>#6</td>
	    <td>Mickael</td>
	    <td>[email protected]</td>
	    <td>Moderator</td>
    </tr>
</table>

Ok, we are almost done, we have imported the required files and created our HTML table. Now, let’s add the jQuery code that we will use to create the “Export” button.

After your JS imports, add this code :

<script type="text/javascript">

	$(document).ready(function() {
			
		$("#table-to-export").tableExport({
            headers: true,
            footers: true,
            formats: ['csv'],
            filename: 'id',
            bootstrap: true,
            position: 'bottom',
            ignoreRows: null,
            ignoreCols: null,
            ignoreCSS: '.tableexport-ignore',
            emptyCSS: '.tableexport-empty',
            trimWhitespace: false,
            RTL: false,
            sheetname: 'id'
        });
	});
	
</script>

In this code, we simply call our JS plugin (TableExport.js) by referencing the ID of our table (#table-to-export) and by providing a few options to our JS plugin. You can see / customize these options by checking their documentation.

If you followed the tutorial correctly until now and if you refresh your page, you should see a button appearing on top of your table :

… click on this button to finally download your table as a CSV file. If you open it in Excel / Numbers, you should get this kind of result :

So it was easy isn’t it 😉 ?

Feel free to download the sources behind this tutorial directly here :

Download Sources

If you liked this step-by-step tutorial or if you have any questions, feel free to leave a comment below.

… and don’t forget to subscribe if you want to receive new unique tutorials and source codes directly on your email :