Export html Table to Excel by using JQuery

Leave a Comment
Hi All,
In a following post we will see, how to export html table to Excel by using JQuery.
To accomplish our task we need the following JS files,
jquery-1.10.2.js
jquery.battatech.excelexport.js (It is a free JS Plugin , which is used to export)
Add reference of this files to your solution as below.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="JS/jquery.battatech.excelexport.js"></script>
In PageLoad function write the below Code.

$(document).ready(function () {
            $("#btnExport").click(function () {
                $("#myTable").battatech_excelexport({
                    containerid: "myTable"
   , datatype: 'table'
                });
            });
        });

Here,btnExport is my button ID and myTable is my Table ID.
Please find the entire code snippet as below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        table, td, th {
            border: 1px solid green;
        }

        th {
            background-color: green;
            color: white;
        }
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="JS/jquery.battatech.excelexport.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnExport").click(function () {
                $("#myTable").battatech_excelexport({
                    containerid: "myTable"
   , datatype: 'table'
                });
            });
        });
    </script>
</head>
<body>

    <input type="button" id="btnExport" value="Export To Excel" />
    <br />
    <table id="myTable" cellspacing='0' cellpadding='0'>

        <thead>
            <tr>
                <th>Title</th>
                <th>Employee</th>
                <th>Company</th>
                <th>Department</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>SE</td>
                <td>Karthik</td>
                <td>Microsoft</td>
                <td>Delivery</td>
            </tr>
            <tr>
                <td>SE</td>
                <td>Karthik</td>
                <td>Microsoft</td>
                <td>Delivery</td>
            </tr>
            <tr>
                <td>SE</td>
                <td>Karthik</td>
                <td>Microsoft</td>
                <td>Delivery</td>
            </tr>
            <tr>
                <td>SE</td>
                <td>Karthik</td>
                <td>Microsoft</td>
                <td>Delivery</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

We can see the final out put as follows,


You can download the JS file and HTML file from the below link.
https://sites.google.com/site/sharepointkitchenblog/Export.zip

Thanks..


Related Post

0 comments:

Post a Comment