Export HTML Table to Excel using jQuery table2excel Plug-in

I found this jQuery plug-in the other day that I thought would be useful for developers looking for a quick solution to convert an HTML table to Excel. Here I am sharing an example on how to export an entire HTML table with heading to Excel.

Convert HTML Table to Excel using jQuery table2excel Plugin

It’s a very simple and easy to use plug-in. You can use this plug-in in two different ways.

One, you can download table2excel plug-in on your computer. It’s a ZIP file. Extract the files and inside look for src folder. It has the jquery.table2excel.js file. Save the file in the projects root directory (or wherever you want to access it from).

Two, you can directly include the CDN in your web page.

<script src="http://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>

Now, lets see the example.

The Markup
<style>
    th, td {
        font:14px Verdana;
    }
    table, th, td {
        border:solid 1px #999;
        padding:2px 3px;
        text-align:center;
    }
    th {
        font-weight:bold;
    }
</style>
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="http://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>

    <table id="empTable">
        <tr>
            <th>ID</th>
                <th>Employee Name</th>
                    <th>Age</th>
        </tr>
        <tr>
            <td>01</td>
                <td>Alpha</td>
                    <td>37</td>
        </tr>
        <tr>
            <td>02</td>
                <td>Bravo</td>
                    <td>29</td>
        </tr>
    </table>
</body>
The Script
<script>
    $(document).ready(function () {
        $("#empTable").table2excel({
            filename: "Employees.xls"
        });
    });
</script>

That’s it. The above script executes immediately after the page loads. You can add a button to your markup and execute the script inside the button click event.

$('#bt').click(function () {
    ...
});

The .table2excel() method takes a parameter in the form of filename.

Note: If you add <b> or <strong> tags to your table headers, it would show bold headers in Excel too. For example,

<th><strong>ID</strong></th>
    <th><strong>Employee Name</strong></th>
        <th><strong>Age</strong></th>
Conclusion

Its very simple. However, this nice plug-in has some limitations. You can only add .xls extension to the file (as I have shown in the above example). Although, they say, do not include extension for filename here, I believe you will have to add the .xls extension to the filename.

I hope they will upgrade this nice plug-in, in the future. Well, I am using it, since it is useful.

Previous - How to Get the ID’s of Every DIV element using jQuery



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!