Export HTML Table to Excel using jQuery Plugin Easily In 3 Mins

Export HTML Table to Excel using jQuery Plugin
Code Snippet:
Author:
Published: January 20, 2024
Last Updated: January 22, 2024
Downloads: 14,770
License: MIT
Edit Code online: CodeHim
Read More

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,
});

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...