JQuery Table2 Excel Example Tutorial

jQuery · 11-Apr-2023

When “JQuery Table2 Excel Example Tutorial” moves through design, development and browser testing, tangible rewards can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hi Guys

In this tutorial, I will example you how to jquery table2 excel in convert. I am going to share an awesome plug-in for exporting the HTML table data to the excel sheet by a click of a button.

The table contains the <th> tags that define the headings for the table of HTML. The same headers act as the headings in the excel sheet after export. A few options may also be set like tab name in the excel sheet, the file name of excel etc in the jQuery code that I will explain after the demo.

Bellow The Script Used In The Demo:

<script>
    $(function() {
      $("button").click(function(){
        $("#table2excel").table2excel({
          exclude: ".noExl",
          name: "Excel Document Name"
            }); 
      });
    });
</script>

Here this example,the excel export file will download as the demo page loads.

Full Example

<!DOCTYPE html>
<html>
<head>
  <title>JQuery Table2 Excel Example</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://www.jqueryscript.net/demo/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel/src/jquery.table2excel.js"></script>
</head>
<style type="text/css">
    body{
        background-color: #211c12;
    }
    .container{
        margin-top:80px;
    }
    h1{
        margin-bottom:20px;
    }
    table,table th{
        text-align: center;
    }  
</style>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1 class="text-center">JQuery Table2 Excel Example</h1>
            <table class="table table-bordered" id="table2excel">
                <thead>
                    <tr style="background-color: #fff">
                        <th>#</th>
                        <th>Product Name</th>
                        <th>Product Price</th>
                        <th>Product Qut.</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="active">
                        <td>1</td>
                        <td>Product 1</td>
                        <td>200</td>
                        <td>2</td>
                    </tr>
                    <tr style="background-color: #fff">
                        <td>2</td>
                        <td>Product 2</td>
                        <td>220</td>
                        <td>5</td>
                    </tr>
                    <tr class="success">
                        <td>3</td>
                        <td>Product 3</td>
                        <td>300</td>
                        <td>4</td>
                    </tr>
                    <tr style="background-color: #fff">
                        <td>4</td>
                        <td>Product 4</td>
                        <td>500</td>
                        <td>2</td>
                    </tr>
                    <tr class="info">
                        <td>5</td>
                        <td>Product 5</td>
                        <td>550</td>
                        <td>8</td>
                    </tr>
                </tbody>
            </table>    
            <button class="btn btn-success">Export</button></div>
        </div>
    </div>
</div>
<script>
    $(function() {
      $("button").click(function(){
        $("#table2excel").table2excel({
          exclude: ".xls",
          name: "Excel Document Name"
            }); 
      });
    });
</script>
</body>
</html>

It will help you...