How to export datatable data in excel file in magento 2

How to export datatable data in excel file in magento 2

Ramkumar KRamkumar K Posts: 1Questions: 1Answers: 0
edited April 2021 in DataTables
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
         </tbody>
</table>

<script>
        require([
            "jquery",
            "js/jquery.dataTables.min",
            "js/dataTables.buttons.min",
            "js/jszip.min",
            "js/pdfmake.min",
            "js/vfs_fonts",
            "js/buttons.html5.min",
            "js/buttons.flash.min"
            
            ], function($){
                $(document).ready(function() {

                    $('#example').DataTable({
                        dom: 'Bfrtip',
                        buttons: [
                            {
                                extend: 'excelHtml5',
                                exportOptions: {
                                    columns: [ 0, 1, 2, 3 ]
                                }
                            },
                            {
                                extend: 'csvHtml5',
                                exportOptions: {
                                    columns: [ 0, 1, 2, 3 ]
                                }
                            }
                        ]
                    });
                });
            });
    </script>

There is no error in console.

Result: CSV button is visible and working. But Excel button is not visible.

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    The flash button isn't needed any more, and it doesn't look like you're including the CSS files. If you look at this example here, ensure you have the necessary files listed on the Javascript and CSS tabs beneath the table.

    Colin

This discussion has been closed.