Convert (Export) HTML Table to Excel file using jQuery

This article will explain how to convert (explain) HTML Table to Excel file with the help of the jQuery table2excel plugin.

In this article I will explain with an example, how to convert (export) HTML Table to Excel file using jQuery.

This article will explain how to convert (explain) HTML Table to Excel file with the help of the jQuery table2excel plugin.

HTML Markup

The following HTML Markup consists of an HTML Table and a Button.

<table id="tblCustomers" cellspacing="0" cellpadding="0">

    <tr>

        <th>Customer Id</th>

        <th>Name</th>

        <th>Country</th>

    </tr>

    <tr>

        <td>1</td>

        <td>John Hammond</td>

        <td>United States</td>

    </tr>

    <tr>

        <td>2</td>

        <td>Mudassar Khan</td>

        <td>India</td>

    </tr>

    <tr>

        <td>3</td>

        <td>Suzanne Mathews</td>

        <td>France</td>

    </tr>

    <tr>

        <td>4</td>

        <td>Robert Schidner</td>

        <td>Russia</td>

    </tr>

</table>

<br />

<input type="button" id="btnExport" value="Export" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="table2excel.js" type="text/javascript"></script>

<script type="text/javascript">

    $(function () {

        $("#btnExport").click(function () {

            $("#tblCustomers").table2excel({

                filename: "Table.xls"

            });

        });

    });

</script>

Explanation:

When the Export Button is clicked, the jQuery table2excel plugin is applied to the HTML Table. The jQuery table2excel plugin accepts filename parameter which sets the name of the Excel file.

Note: You will get a Warning message from Microsoft Excel application when you try to open the generated Excel file. This Warning is shown because the generated file is not a valid Excel format as the plugin simply exports the HTML content to an Excel file.

Screenshots

Download Source