Menu Close

How to Convert a HTML Table into Excel Spreadsheet using jQuery?

Convert HTML table into Excel Spreadsheet

To convert the HTML Table into the Excel Spreadsheet can be done with the help of jQuery plugins. The “table2excel” is a lightweight plug-in of jQuery, which helps to achieve the solution to the problem. In this we will create a table using HTML <table> tag in that we will create the number of rows using <tr> tag. The data is inserted inside the rows using the <td> tag.


The syntax used in this is −

   filename: “”,
   fileext: “”
  • selector − It can be any HTML table tag, class or id.

  • table2excel − It is a function which will convert the HTML table. It contains certain arguments such as filename, fileext, etc.

Query CDN & table2excel plug-in CDN

To convert the table to excel sheet we will add some of the Content Delivery Network (CDN) links to our HTML page −

<script src="//"></script>

<script src="//"></script>

Convert a HTML Table into Excel Spreadsheet using jQuery

  • Step 1 − Create a HTML table using <table> tag, add rows to the table using <tr> tag, insert data to the table rows using <td> tag.

  • Step 2 − Create a HTML button using <button> tag which will be used to export the table to excel spreadsheet.

  • Step 3 − Add the Content Delivery Network (CDN) of jQuery and jQuery plug-in “table2excel” to the head tag of the HTML page.

  • Step 4 − Create the <script> tag at the end of the body tag, select a selector as “button” and add click function as jQuery syntax which will trigger an arrow function.

  • Step 5 − Inside arrow function select the table through the given id inside the table tag as a selector and use the “table2excel” function. Inside this function pass two arguments as filename: “Write your filename” and fileext: “.xls”.

  • Step 6 − On clicking the button it will fire the table2excel function and will download a .xls file.


In this example we have created an HTML table as student records which store the records of the student in the table format, student info as Student Name, Branch, Roll No. and Date Of Birth. So simply in this on clicking on the export button the table will be converted into the excel file and will be downloaded automatically.

   <script src="//"></script>
   <script src="//"></script>
   <title> Convert HTML table into Excel Spreadsheet </title>
      <h1>Student Records</h1>
      <table id="studtable" style="border-spacing: 0.6rem 0px;text-align: center;">
         <th>Roll No.</th>
      <button style="margin-top: 0.5rem;">Export</button>
         $('button').click(() => {
            $('#studtable').table2excel({ filename: "StudentRecords", fileext: ".xls"});


This solution can be helpful in many applications such as a CRUD (create, read, update, delete) application, student or employee management system or in an ecommerce log activity records etc. It is necessary to include CDN links in order to use the “table2excel” function. In the table2excel function there are more parameters which are passed in as object as key value.

The parameters are −

  • preserveColors − If passed true it includes the background color and font color of HTML.

  • exclude_img − It does not include the image of the table when true value is passed.

  • exclude_links − When the true value is stored this excludes the link inserted in the table.

  • exclude_input − The value of these are in Boolean form as true or false.

Posted in HTML, JavaScript, jQuery

You can also read...