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 13 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: 12,098Questions: 0Answers: 2,054

    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

  • shaistamikeshaistamike Posts: 1Questions: 0Answers: 0

    Hi, I have done some research on it few months earlier and find out this... It works for me and I hope it will work for you too.

    <exportButton class="Magento\Ui\Component\ExportButton">
    <argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
    <item name="options" xsi:type="array">
    <item name="cvs" xsi:type="array">
    <item name="value" xsi:type="string">csv</item>
    <item name="label" xsi:type="string" translate="true">CSV</item>
    <item name="url" xsi:type="string">mui/export/gridToCsv</item>
    </item>
    <item name="xml" xsi:type="array">
    <item name="value" xsi:type="string">xml</item>
    <item name="label" xsi:type="string" translate="true">Excel XML</item>
    <item name="url" xsi:type="string">mui/export/gridToXml</item>
    </item>
    <item name="xls" xsi:type="array">
    <item name="value" xsi:type="string">xls</item>
    <item name="label" xsi:type="string" translate="true">Excel XLS</item>
    <item name="url" xsi:type="string">{{module}}/export/gridToXls</item>
    </item>
    </item>
    </item>
    </argument>
    </exportButton>\

    I recommend woocommerce as it is more friendly then magento. I have personally did some research on Magento vs WooCommerce and yes woocomerce did win for me... I believe everyone has it's own preference.

Sign In or Register to comment.