The TableHTMLExport
is a lightweight jQuery plugin that helps you to export HTML table to Excel .csv
file. It converts table data into Excel sheet and force the browser to download the generated file.
The plugin can also export HTML table into TXT, JSON or PDF file. But in this tutorial, we’ll focus on Excel exportation using this jQuery plugin.
Plugin Overview
Plugin: | TableHTMLExport |
Author: | Furioso Jack |
Licence: | MIT Licence |
Published: | January 20, 2024 |
Repository: | Fork on GitHub |
Dependencies: | jQuery 1.3.1 or Latest version and Font Awesome 4 (Optional) |
File Type: | zip archive (HTML, CSS & JavaScript ) |
Package Size: | 7.38 KB |
How to Use jQuery Plugin to Export HTML Table to Excel
1. To create table export functionality, first of all load jQuery JavaScript library and TableHTMLExport
plugin JS file into your HTML document.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Table HTML Export Js --> <script src="js/tableHTMLExport.js"></script>
Tip: You can also load plugin through CDN into your project.
<script src="https://gitcdn.xyz/repo/FuriosoJack/TableHTMLExport/v1.0.0/src/tableHTMLExport.js"></script>
2. Add a unique id (or class) to your HTML table that you want to export into excel sheet.
<table id="myTable"> <thead> <tr> <th>Company</th> <th>Contact</th> <th class='acciones'>Country</th> </tr> </thead> <tbody> <tr> <td>CodeHim</td> <td id="primero">Maria Anders</td> <td class="acciones">Germany</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td class="acciones">Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr id="ultimo"> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </tbody> </table>
3. Now, create a button that will be used to export your HTML table into Excel .csv
file.
<button class="export-btn"><i class="fa fa-file-excel-o"></i> Export to Excel</button>
Note: The <i class="fa fa-file-excel-o"></i>
require Font Awesome CSS file to show excel file icon in export button.
3.1 Also Load Font Awesome if not already done.
<!-- Font Awesome 4--> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
4. Style your HTML table and export button with CSS (Optional).
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even){background-color: #f2f2f2} th, .export-btn { background-color: #81BD5D; color: #fff; } .export-btn{ padding: 10px 16px; border: 0; outline: 0; font-size: 18px; border-radius: 4px; margin: 10px auto; cursor: pointer; } .export-btn:hover{ opacity: 0.9; }
5. Finally, initialize the plugin in jQuery document ready function.
Tip: Use the click event to export file on button click. Otherwise file will be downloaded on body load.
$(document).ready(function(){ $(".export-btn").click(function(){ $("#tableCompany").tableHTMLExport({ type:'csv', filename:'codehim-html-table-to-excel.csv', }); }); });
Advance Configuration Options for Table HTML Export Plugin
The following are some advance configuration options to create / customize “Table HTML Export”.
Option | Description, Default, Type |
---|---|
type |
This option define the type of file in which you want to export HTML table. Type: String. Available Options are: ‘csv’, | ‘txt’, | ‘json’, | ‘pdf’. $("#table").tableHTMLExport({ type: 'csv', }); |
ignoreColumns & ignoreRows |
These options are useful if you want to ignore specific columns or rows. Default: ”, Type: Object / String. Valid Option Value: Pass the selector (id or class) of your desired column or row. $("#table").tableHTMLExport({ ignoreColumns: "#id-of-column", ignoreRows: "#id-of-row", }); |
htmlContent |
Indicates if the content of the table to be exported has HTML code. Default: false, Type: Boolean.
$("#table").tableHTMLExport({ htmlContent: false, }); |
filename |
It define the name of file that will be downloaded. Default: “tableHTMLExport.csv”, Type: String.
$("#table").tableHTMLExport({ filename: "My-Custom-File-Name.csv", }); |
quoteFields |
It is useful when exported to .csv and which cites fields. Default: true, Type: Boolean.
$("#table").tableHTMLExport({ quoteFields: true, }); |
consoleLog |
Enable / disable debugging mode. Default: false, Type: Boolean.
$("#table").tableHTMLExport({ consoleLog: true, }); |
Similar Code Snippets:
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.