Export HTML Table to Excel using jQuery Plugin

August 12, 2019 No comments jQuery XLSX Export Table

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.

Export html table to csv pdf text text file

2. Plugin Overview

Library TableHTMLExport
Author Furioso Jack
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.3.1 or Latest version and Font Awesome 4 (Optional)

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.

{{ message }}

{{ 'Comments are closed.' | trans }}