Export Html Table To Excel Spreadsheet using jQuery - table2excel

table2excel is a simple yet useful jQuery plugin which allows for exporting Html table data to an Excel file.

Live Demo

#	Column 1	Column 2	Column 3
1	Column 1.1	Column 1.2	Column 1.3
2	Column 2.1	Column 2.2	Column 2.3
3	Column 3.1	Column 3.2	Column 3.3
4	Column 4.1	Column 4.2	Column 4.3
5	Column 5.1	Column 5.2	Column 5.3
6	Column 6.1	Column 6.2	Column 6.3
7	Column 7.1	Column 7.2	Column 7.3

How to Use

Add the css below to your html page

<link rel="stylesheet" media="all" href="bootstrap4.min.css" />

Create a container where you want to render table

<table class="table table-striped table-bordered table2excel" data-tableName="Test Table 1">
    <thead>
        <tr class="noExl">
            <th>#</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>

    </thead>
    <tbody>
        <tr class="active">
            <td>1</td>
            <td>Column 1.1</td>
            <td>Column 1.2</td>
            <td>Column 1.3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Column 2.1</td>
            <td>Column 2.2</td>
            <td>Column 2.3</td>
        </tr>
        <tr class="success">
            <td>3</td>
            <td>Column 3.1</td>
            <td>Column 3.2</td>
            <td>Column 3.3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Column 4.1</td>
            <td>Column 4.2</td>
            <td>Column 4.3</td>
        </tr>
        <tr class="info">
            <td>5</td>
            <td>Column 5.1</td>
            <td>Column 5.2</td>
            <td>Column 5.3</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Column 6.1</td>
            <td>Column 6.2</td>
            <td>Column 6.3</td>
        </tr>
        <tr class="warning">
            <td>7</td>
            <td>Column 7.1</td>
            <td>Column 7.2</td>
            <td>Column 7.3</td>
        </tr>
    </tbody>
</table>
<button class="btn btn-info exportToExcel">Export to XLS</button>

Load jQuery library together with the Export Html Table To Excel Spreadsheet library into your code

<script src="../dist/jquery.table2excel.min.js"></script>
<script>
    $(function () {
        $(".exportToExcel").click(function (e) {
            var table = $(this).prev('.table2excel');
            if (table && table.length) {
                var preserveColors = (table.hasClass('table2excel_with_colors') ? true : false);
                $(table).table2excel({
                    exclude: ".noExl",
                    name: "Excel Document Name",
                    filename: "myFileName" + new Date().toISOString().replace(/[\-\:\.]/g, "") +
                        ".xls",
                    fileext: ".xls",
                    exclude_img: true,
                    exclude_links: true,
                    exclude_inputs: true,
                    preserveColors: preserveColors
                });
            }
        });

    });
</script>