Export HTML Table to Excel using jQuery table2excel Plug-in

I found this jQuery plug-in recently 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="https://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>

Now, lets see the example.

<html>
<head>
    <title>Export Table to Excel using jQuery</title>

    <style>
        th, td {
            font:14px Verdana;
        }
        table, th, td {
            border:solid 1px #999;
            padding:2px 3px;
            text-align:center;
        }
        th {
            font-weight:bold;
        }
    </style>
</head>

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://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>

<script>
    $(document).ready(function () {
        $("#empTable").table2excel({
            filename: "Employees.xls"
        });
    });
</script>
</html>

Try it

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 like this ...

$('#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.

← PreviousNext →