Export HTML Table to Excel using jQuery Plugin

1. Introduction

TableHTMLExport jQuery plugin that exports an HTML table to JSON, CSV, TXT, or PDF and force the browser to download the generated file. The plugin without additionally server requests can export HTML table and download its content. Using this plugin is a simple way to reduce the costs of running applications because for every request is resource-hungry.

2. Plugin Overview

Demo

3. How to install and use TableHTMLExport jQuery plugin

Follow below steps in order to install TableHTMLExport jQuery plugin.

1. first of all load jQuery JavaScript library:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. second step is to include TableHTMLExport plugin:

<!-- Table HTML Export Js -->
<script src="js/tableHTMLExport.js"></script>

3. next, create a sample HTML table with export button:

  <table id="myTable">
  <thead>
    <tr>
      <th>Customer</th>
      <th>Contact</th>
      <th>Country</th>
  </tr>    
  </thead>
  <tbody>
    <tr>
      <td>FrontBackend</td>
      <td>Martin Wojtus</td>
      <td>France</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </tbody>  
</table>

<button class="export-btn"><i class="fa fa-file-excel-o"></i> Export to Excel</button>

4. final step is to initialize the tableHTMLExport plugin:

$(document).ready(function(){
   $(".export-btn").click(function(){  
     $("#tableCustomers").tableHTMLExport({
      type:'csv',
      filename:'frontbackend-html-table-to-excel.csv',
    });
  });
});

tableHTMLExport plugin is used ad hoc, at the moment when we need to export the table and download file.

4. Conclusion

In this article, we showcased tableHTMLExport jQuery plugin that allows you to export any HTML table to CSV/PDF/TXT/JSON file. The plugin is a great way to download table reports without involving the backend side of the application. tableHTMLExport plugin is simple to use, just select a table using jQuery selectors, choose the result file type (you can choose between CSV, PDF, text, and JSON) and a filename and run the plugin.