I am implementing export buttons on jQuery DataTables using the Buttons extension. I have all the buttons working except for the export to Excel button.

All the below scripts are included:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/datatables/media/js/jquery.dataTables.js"></script>
<script src="bower_components/datatables/media/js/dataTables.bootstrap.js"></script>
<script src="bower_components/datatables-buttons/js/dataTables.buttons.js"></script>
<script src="bower_components/datatables-buttons/js/buttons.html5.js"></script>
<script src="bower_components/datatables-buttons/js/buttons.print.js"></script>
<script src="bower_components/datatables-buttons/js/buttons.bootstrap.js"></script>
<script src="bower_components/jszip/dist/jszip.js"></script>
<script src="bower_components/pdfmake/build/pdfmake.js"></script>
<script src="bower_components/pdfmake/build/vfs_fonts.js"></script>

Then I create the buttons and append them to a div:

// Create and render buttons
new $.fn.dataTable.Buttons( table, {
    buttons: ['copyHtml5', 'csvHtml5', 'excelHtml5', 'pdfHtml5', 'print']
})
table.buttons().container().appendTo($('.header-right'), self);

When clicking on the Excel button, my app downloads a xlsx.zip file. Why is it not downloading a ".xlsx" file?

I've also tried to extend the button by manually adding the extension but whatever I set to the extension property ends up as "extension-name.zip".

new $.fn.dataTable.Buttons( table, {
    buttons: [
        {
            extend: 'excelHtml5',
            extension: '.xlsx'
        }
    ]
 })

I am implementing export buttons on jQuery DataTables using the Buttons extension. I have all the buttons working except for the export to Excel button.

All the below scripts are included:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/datatables/media/js/jquery.dataTables.js"></script>
<script src="bower_components/datatables/media/js/dataTables.bootstrap.js"></script>
<script src="bower_components/datatables-buttons/js/dataTables.buttons.js"></script>
<script src="bower_components/datatables-buttons/js/buttons.html5.js"></script>
<script src="bower_components/datatables-buttons/js/buttons.print.js"></script>
<script src="bower_components/datatables-buttons/js/buttons.bootstrap.js"></script>
<script src="bower_components/jszip/dist/jszip.js"></script>
<script src="bower_components/pdfmake/build/pdfmake.js"></script>
<script src="bower_components/pdfmake/build/vfs_fonts.js"></script>

Then I create the buttons and append them to a div:

// Create and render buttons
new $.fn.dataTable.Buttons( table, {
    buttons: ['copyHtml5', 'csvHtml5', 'excelHtml5', 'pdfHtml5', 'print']
})
table.buttons().container().appendTo($('.header-right'), self);

When clicking on the Excel button, my app downloads a xlsx.zip file. Why is it not downloading a ".xlsx" file?

I've also tried to extend the button by manually adding the extension but whatever I set to the extension property ends up as "extension-name.zip".

new $.fn.dataTable.Buttons( table, {
    buttons: [
        {
            extend: 'excelHtml5',
            extension: '.xlsx'
        }
    ]
 })

• javascript
• jquery
• datatables

• And what is your question? – Axel Amthor Commented Oct 8, 2015 at 23:36
• Question added in at the end. – j.fong Commented Oct 8, 2015 at 23:39
• Isn't the end result to have a .zip extension? Inside the .zip file would be the .xlsx file. – Papa Commented Oct 9, 2015 at 0:29
• 1 Try to change the order of the JS files so that buttons.html5.js is loaded last. – Gyrocode.com Commented Oct 9, 2015 at 2:45
• @j.fong Did anything work for you? Even I am facing similar issue. Excel button downloads a zip. – Raeesaa Commented Nov 8, 2015 at 14:34

3 Answers 3

Setting the Title property worked for me.

The following exported with the .xlsx file extension

 buttons: [{
            extend: 'excelHtml5',
            title: 'Location Report' 
            }
          ],.....etc

When the title was not set, the file exported with the .zip file extension

 buttons: [{
            extend: 'excelHtml5',
            title: '' 
            }
          ],.....etc

I also had same problem....but i think it is related to browser.

• In Mozilla Firefox when you click on Excel export, it asks whether you want to Open or Save the file. When you click on Open, it saves files temporarily in zip format and opens the zip file(Which is actually .xlsx file).
• If you change the extension from zip to xlsx then you are good to go.
• Where as when you click Save, it will save .xlsx file only.
• And in Chrome, it directly saves the file as .xlsx only.

I also had same issue. Working perfectly with the chrome but not with the Mozila Firefox.....

Finally after so much efforts and research. i found the solution.

Please include below file in your script after datatable js file. //cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js

It's working with me.