How to Export a Table to Excel Spreadsheet

We can export a table to an Excel spreadsheet by applying this script. When the Export to Excel Button is clicked, the Export JavaScript function gets called.

Below the example :

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light/all.min.css" />

<div class="container">
<h3>How to Export a Table to Excel Spreadsheet</h3>
    <button id="exportToButton" class="btn btn-success clearfix"><span class="fa fa-file-pdf-o"></span> Export to Excel</button>

    <table id="exportToTable" class="table table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Jonson</td>
                <td>31</td>
                <td>jonson@gmail.com</td>
            </tr>
            <tr>
                <td>Nailsan</td>
                <td>32</td>
                <td>nailsan@gmail.com</td>
            </tr>
            <tr>
                <td>Carlo joi</td>
                <td>30</td>
                <td>carlojoi@gmail.com</td>
            </tr>
            <tr>
                <td>Charlie Chat</td>
                <td>32</td>
                <td>charliechat@gmail.com</td>
            </tr>
            <tr>
                <td>Loe Andan</td>
                <td>34</td>
                <td>loeandan@gmail.com</td>
            </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/jszip.min.js"></script>

<script type="text/javascript">
    jQuery(function ($) {
        $("#exportToButton").click(function () {
            var dataSource = shield.DataSource.create({
                data: "#exportToTable",
                schema: {
                    type: "table",
                    fields: {
                        Name: { type: String },
                        Age: { type: Number },
                        Email: { type: String }
                    }
                }
            });

            dataSource.read().then(function (data) {
                new shield.exp.OOXMLWorkbook({
                    author: "Devnote",
                    worksheets: [
                        {
                            name: "Bootstrap Table",
                            rows: [
                                {
                                    cells: [
                                        {
                                            style: {
                                                bold: true
                                            },
                                            type: String,
                                            value: "Name"
                                        },
                                        {
                                            style: {
                                                bold: true
                                            },
                                            type: String,
                                            value: "Age"
                                        },
                                        {
                                            style: {
                                                bold: true
                                            },
                                            type: String,
                                            value: "Email"
                                        }
                                    ]
                                }
                            ].concat($.map(data, function(item) {
                                return {
                                    cells: [
                                        { type: String, value: item.Name },
                                        { type: Number, value: item.Age },
                                        { type: String, value: item.Email }
                                    ]
                                };
                            }))
                        }
                    ]
                }).saveAs({
                    fileName: "exportToExcel"
                });
            });
        });
    });
</script>