How To Export HTML Table In Excel Using jQuery

Introduction

In this article, we will see How to export an HTML table in Excel using jquery with web applications; the ability to export HTML tables to Excel can be helpful since it makes it simple for users to download and analyze data. A quick and effective method for exporting HTML tables to Excel can be made with jQuery.

Using the jQuery-Table2Excel third-party plugin is one way to accomplish this. By simply invoking a function on a button click event, this plugin enables you to convert HTML tables to Excel. Using this plugin, let's look at how to export an HTML table to Excel. Create an HTML grid table you want to export and include a button that triggers the export function using the button's ID.

​<h3 class="table-header font-weight-bold"> <u> User Management </u> </h3>
<div class="Row" style="display: flex; justify-content: space-between;">

    <div class="col-sm-6 ">
        <button class="btn btn-secondary btn-lg" type="button" aria-pressed="true">  <a class="text-white" href="Add_User"> Add User </a></button>
    </div>
    <div class="col-sm-6 ">

        <button type="button" class="btn btn-primary" id="btnExport" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" style="padding: 9px; margin-left: 78%;">Export Report
        </button>
    </div>
</div>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body table-responsive table mt-2" id="dataTable" role="grid" aria-describedby="dataTable_info">
                    <table class="table table-sm table-hover my-0 mydatatable" id="mydatatable" style=" text-align:center">
                        <thead class="text-center">
                            <tr>
                                <th>S.No</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Type</th>
                                <th>Created Date</th>
                                
                            </tr>
                        </thead>
                        <tbody>
                            @{
                                int x = 1;
                                @foreach (var item in Model)
                                {
                                    if ([email protected])
                                    {
                                        <tr>
                                            <td>@x</td>
                                            <td>@item.Name</td>
                                            <td>@item.Email</td>
                                            <td>@item.Phone</td>
                                            <td>@item.Type</td>
                                            <td>@item.CreatedDate.ToShortDateString()</td>
                                            
                                        </tr>
                                        x++;
                                    }
                                }
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>

Output

Click the export report button to export into Excel.

Add the jquery library to your HTML file and the tabletToExcel library to the HTML file.

Using the export button's event listener, this code causes the HTML table with the ID "my-table" to run the table2excel function. The Excel file that will be generated is named according to the filename argument.

<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/linways/[email protected]/dist/tableToExcel.js"></script>
<script>
    $(document).ready(function () {
        $("#btnExport").click(function () {
            let table = document.getElementsByTagName("table");
            console.log(table);
            debugger;
            TableToExcel.convert(table[0], {
                name: `UserManagement.xlsx`,
                sheet: {
                    name: 'Usermanagement'
                }
            });
        });
    });    
</script>

All done! When a user selects the export button, an Excel file with the supplied filename will be created from the HTML table. 

Output

Conclusion

 jQuery function for exporting HTML tables to Excel can be beneficial. The jQuery-Table2Excel plugin makes exporting HTML tables to Excel simple by running a function on a button-click event. Enabling users to download and evaluate data in a comfortable format can save them time and effort.

Follow C# Corner to learn more new and amazing things about jQuery or to explore more technologies. If you have any queries/suggestions on the article, please leave your questions and thoughts in the comment section below.