dataTables Export to Excel button is not showing

Question

I have a problem in jquery dataTables. The "Export to Excel" is not showing in iPad and mobile devices. It is showing in desktop. Other buttons like copy, csv and pdf are showing in iPad and desktop. Here is my code :

$('#productDatatable').DataTable({
    dom: 'Bfrtip',
    buttons: [
        'copy', 'excel', 'pdf', 'csv'
    ]
} );

Did you figure it out? Got same problem, scripts in correct order. — Larsi, Feb 14 '17 at 09:56
In my case the file "button.html5.js" was loaded without content. The reason for this was an incorrect setting in .htaccess, which redirected all files with "html". Many CMS systems work with "html" redirect files, a look at the content is worthwhile. — Sarah Trees, Mar 18 '18 at 07:55
@SarahTrees how do test the "button.html5.js" was loaded without content? Mine already in correct order, but excel button still not showing. — Zaiman Noris, Feb 11 '19 at 03:17
please follow this link https://stackoverflow.com/a/71977937/3041435 — Gufran Hasan, Apr 23 '22 at 08:09

score 61 · Answer 1 · edited Jul 26 '18 at 13:33

61

Try loading required JS libraries in the following order, if anyone still having issues in showing the DataTable export buttons.

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>

Cheers!

edited Jul 26 '18 at 13:33

pramod

2,258
1
17
22

answered Jul 27 '17 at 08:48

Anjana Silva

8,353
4
51
54

2

Thanks.. This worked for me.. may be library version issue. – Md. Shafiqur Rahman Sep 02 '19 at 10:28
please follow this link https://stackoverflow.com/a/71977937/3041435 – Gufran Hasan Apr 23 '22 at 08:10
Definitely a version issue between the files. Do not load locally with bundles, instead load by CDN. – ojonasplima Dec 14 '22 at 18:33
I just added the ``` ``` and re-arranged my js files and **JOB DONE** – Danish Mehmood May 17 '23 at 06:52

score 50 · Answer 2 · answered Jul 22 '18 at 20:43

50

I know this is super old but since I was using Webpack 4 and Babel and I was importing the files (ES6) I had to put in the global scope the jsZip:

import 'datatables.net-bs';
import jsZip from 'jszip';
import 'datatables.net-buttons-bs';
import 'datatables.net-buttons/js/buttons.colVis.min';
import 'datatables.net-buttons/js/dataTables.buttons.min';
import 'datatables.net-buttons/js/buttons.flash.min';
import 'datatables.net-buttons/js/buttons.html5.min';

// This line was the one missing
window.JSZip = jsZip;

Hope it helps Cheers

answered Jul 22 '18 at 20:43

jpacareu

631
6
9

3

Thank you! This is the key part I was missing and haven't seen it answered anywhere else. Should be added to the datatable docs – alanning Jul 18 '19 at 13:25
2

Browserify : `global.JSZip = require("jszip");` I suspect this is due to xlsx essentially being a zipped xml file. Too bad this fails silently, an error message in the console would have save me a bit of time – Ullullu Aug 01 '19 at 19:08
2

Thank You! Using Laravel webpack solved by adding `window.JSZip = require('jszip');` – liepumartins Nov 12 '19 at 14:10
1

this is exactly what I needed.. couldn't find this on any other thread! This worked, with a few tweaks related to my requirement. Thanks! – SoorajSethumadhavan Mar 21 '20 at 13:44
That definitely help!! – Kiry Meas Aug 08 '20 at 07:35
1

Using Symfony webpack-encore ... `Encore.autoProvideVariables({…})` did not help. It seems _datatables.net-buttons/js/buttons.html5.js_ is the one to blame ... as you can see, Webpack falls in the _amd_ block where no _jszip_ dependency exists `define( ['jquery', 'datatables.net', 'datatables.net-buttons'],` ... Once compiled, the factory uses the following statement to access JSZip `return jszip || window.JSZip;`, hence the magic line `window.JSZip = jsZip;` – Stphane Dec 14 '20 at 14:28

score 39 · Answer 3 · answered Apr 12 '18 at 12:39

39

For me I was missing the dom: 'Bfrtip', attribute in my table definition.

answered Apr 12 '18 at 12:39

Augustin Riedinger

20,909
29
133
206

Thanks!, that fixed my problem, but why use `dom` here? and 'Bfrtip' ? – simo May 08 '18 at 08:55
I can't remember exactly where I found the solution but I think this link helped https://datatables.net/forums/discussion/29527/dom-bfrtip – Augustin Riedinger May 15 '18 at 09:51
Thanks dom: 'Bfrtip', – Sanjay Kumar Jan 31 '19 at 11:01
This is in the documentation itself but don't know the use of it. – rahim.nagori Nov 21 '20 at 08:17
6

The use of `dom: 'Bfrtip'` is the format of the table. It's hard to remember each letter, but `f` is for filter, `t` is for table, `B` is for buttons, `i` is for information, `p` is for paging. So, for instance, `dom: 'Bfpitipf'` would have Buttons at the top, then the search box, then paging, then that little info piece, then the table, then info again, then paging again, and the search box again. `dom: 'it'` would not show buttons, filter, or paging, just the info line and the table. – RoboticRenaissance Jun 11 '21 at 06:11

score 25 · Answer 4 · edited Nov 21 '16 at 16:28

Okay so I had the same exact problem (Excel button not showing while the other buttons are), and it appears that you have to include your JavaScript files in a specific order, or it won't work.

For me the problem was that I was including buttons.html5.js before jszip.js, but you have to put them in this order:

jszip.js
buttons.html5.js

And you also have to put these two files after the DataTables and DataTables.buttons files

What I find problematic is that if you put them in the wrong order, there isn't any JavaScript error displayed in the browser console.

davidkonrad · Answer 5 · 2016-06-22T11:57:16.703

21

You should refer to the ★html5 versions

$('#productDatatable').DataTable({
  dom: 'Bfrtip',
  buttons: [
    'copyHtml5', 'excelHtml5', 'pdfHtml5', 'csvHtml5'
  ]
} );

Reason: When using copy, excel etc, you are in fact in risk of referring to the flash implementation, which really should be considered as a fallback only. Flash is removed / disabled from iPads and most smartphones, thats why the Excel button not is working. If you still have problems, ensure you have included these library files

jszip.min.js
pdfmake.min.js
vfs_fonts.js
buttons.html5.min.js

edited Jun 22 '16 at 11:57

answered Jun 22 '16 at 11:53

davidkonrad

83,997
17
205
265

i have already included all these(jszip.min.js, pdfmake.min.js, vfs_fonts.js, buttons.html5.min.js) libraries. – Ninju Jun 22 '16 at 11:57
@Ninju, Yes - just a reminder, refer to `excelHtml5`. – davidkonrad Jun 22 '16 at 11:58

score 15 · Answer 6 · answered Sep 12 '17 at 07:42

Just add these references before your data table script. It works for me.

For generating Datatable use this -

<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

And for data table button use these references -

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.1/css/buttons.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.flash.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.4.1/js/buttons.print.min.js"></script>

score 4 · Answer 7 · answered Sep 04 '17 at 06:25

4

I had same problem, it was not because of jquery scripts.

Go to browser setting(chrome in my case) > Search Flash >

Click on Control what information websites can use > it will navigate to content settings (chrome://settings/content?search=flash) >

Click on Flash >

In the Allow block add your website using Add button

answered Sep 04 '17 at 06:25

Rajdeep

788
7
26

Thats only allowing the flash versions even in 2017 u dont wanna do thaat – c-sharp-and-swiftui-devni Aug 31 '21 at 17:46

score 4 · Answer 8 · answered Jul 02 '20 at 11:00

4

Adding info if someone else has problem with pdf button not showing with webpack 4, you have to use:

import pdfMake from 'pdfmake/build/pdfmake'
import pdfFonts from 'pdfmake/build/vfs_fonts'
import jsZip from 'jszip'
pdfMake.vfs = pdfFonts.pdfMake.vfs;
window.pdfMake = pdfMake;
window.JSZip = jsZip;

answered Jul 02 '20 at 11:00

Herz3h

614
5
20

Thank you. This is what worked for me: import JSZip from 'jszip'; import pdfMake from 'pdfmake/build/pdfmake'; import pdfFonts from 'pdfmake/build/vfs_fonts'; pdfMake.vfs = pdfFonts.pdfMake.vfs; window.pdfMake = pdfMake; window.JSZip = JSZip; – Nick_K May 12 '23 at 13:39

Merrin K · Answer 9 · 2021-12-03T15:17:25.437

Try this

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"> 
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css">

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.print.min.js"></script>

<script>
    $(document).ready(function() {
        $('#example').DataTable( {
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        } );
    } );
</script>

datatables.net:

score 2 · Answer 10 · answered Sep 27 '17 at 16:23

2

Export to Excel doesn't work on Mac either. From the datatable's website: "The excelHtml5 button will not work in Safari at all - as noted in the button's documentation. This is because of an unimplemented feature in Safari."

Note that even if you use Chrome in apple products, it still uses Safari's engine so it won't work.

It might be fixed in the future but for now I just added the CSV button

answered Sep 27 '17 at 16:23

Alx

291
2
10

2

Just an update to say Export to Excel is working for me now with Safari and Chrome on OSX. You will need the `window.JSZip = jsZip` line as noted here, though: https://stackoverflow.com/a/51469094/219238 – alanning Jul 18 '19 at 13:24

score 1 · Answer 11 · answered Aug 16 '17 at 06:15

i ran into the same problem in Asp.NET MVC 4. the thing is if you add your CDN/JS files in _layout page then the buttons wont show in Main View page. instead add those CDN/JS files into the page you are using for data Table. also make sure they are in correct order.

jquery.min.js
jszip.min.js
pdfmake.min.js
vfs_fonts.js
buttons.html5.min.js

kausmil · Answer 12 · 2021-11-30T05:24:41.293

Perhaps you are using a JS file. If you are using this $document.ready(function() {}); This $document.ready(function() {}); Remove it. The button will then be displayed.

$(document).ready(function() { // <-remove;
let data = {
    "get-list": "history",
    symbol: 'coke'
};
$('#userhistoryTable').DataTable({
        order: [ [ 3, "DEC" ] ],
        destroy: true,
        dom: 'Blfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        ajax: {
            url: 'curl',
            type: 'GET',
            data : data,
            dataSrc: '',
            error: function (e) {
                errorHandler(e);
            }
        },
        columns: [
            {data: "type"},
            {data: "price"},
            {data: "quantity"},
            {
                data: "time", 
                render: function(time) {
                    return moment(time).format('YYYY-MM-DD HH:mm');
                }
            }
        ]
    });
}); // <-remove;

score 0 · Answer 13 · answered Feb 14 '21 at 03:25

For me, importing the non-minified version of datatables solved the problem of disappearing buttons.

<!-- In html, import -->
DataTables/datatables.css
DataTables/datatables.js
<!-- instead of -->
DataTables/datatables.min.css
DataTables/datatables.min.js

I downloading the concatenated version of datatables that includes needed libraries. No need for additional imports.

score 0 · Answer 14 · answered Mar 28 '21 at 22:14

A lot of people encounter this issue a lot and usually has to do with how they arrange their css and javascript files. This arrangement worked for me.

@*CSS Files*@
    <link href="css/datatables.min.css" rel="stylesheet" />
    <link href="css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="css/buttons.bootstrap.min.css" rel="stylesheet" />
    <link href="css/dataTables.bootstrap4.min.css" rel="stylesheet" />
    <link href="css/buttons.bootstrap4.min.css" rel="stylesheet" />
    <link href="css/select.bootstrap.min.css" rel="stylesheet" />

@*JQuery Initializer*@
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Content/js/jszip.min.js"></script>
<script src="~/Content/js/pdfmake.min.js"></script>
<script src="~/Content/js/vfs_fonts.js"></script>
<script src="~/Content/js/jquery.dataTables.min.js"></script>
<script src="~/Content/js/dataTables.bootstrap4.min.js"></script>
<script src="~/Content/js/dataTables.buttons.min.js"></script>
<script src="~/Content/js/buttons.bootstrap4.min.js"></script>
<script src="~/Content/js/buttons.flash.min.js"></script>
<script src="~/Content/js/buttons.html5.min.js"></script>
<script src="~/Content/js/dataTables.select.min.js"></script>

Watch this video https://youtu.be/8vzTRHrwHlg it details how to solve your problem

score 0 · Answer 15 · answered Jul 29 '22 at 09:26

Do check that you have imported the scripts and styles at the correct place in angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "nvh-admin-portal": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/nvh-admin-portal",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/datatables.net-dt/css/jquery.dataTables.min.css",
              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/datatables.net/js/jquery.dataTables.min.js",
              "node_modules/jszip/dist/jszip.js",
              "node_modules/datatables.net-buttons/js/dataTables.buttons.js",
              "node_modules/datatables.net-buttons/js/buttons.colVis.js",
              "node_modules/datatables.net-buttons/js/buttons.flash.js",
              "node_modules/datatables.net-buttons/js/buttons.html5.js",
              "node_modules/datatables.net-buttons/js/buttons.print.js"
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "test": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "1mb",
                  "maximumError": "1.5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "3kb",
                  "maximumError": "5kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "nvh-admin-portal:build:production"
            },
            "development": {
              "browserTarget": "nvh-admin-portal:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "nvh-admin-portal:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "nvh-admin-portal/node_modules/bootstrap/dist/css/bootstrap.min.css",
              "nvh-admin-portal/node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": [
              "nvh-admin-portal/node_modules/jquery/dist/jquery.min.js",
              "nvh-admin-portal/node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "nvh-admin-portal"
}

dataTables Export to Excel button is not showing

15 Answers15

Linked