Export HTML Table to Excel using jQuery Plugin

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: June 12, 2019
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,
});