web-dev-qa-db-fra.com

le bouton d'exportation de données vers Excel ne s'affiche pas

J'ai un problème dans jquery dataTables. "Exporter vers Excel" ne s'affiche pas dans les iPad et les appareils mobiles. Il montre dans le bureau. D'autres boutons tels que copier, csv et pdf sont visibles sur iPad et sur le bureau. Voici mon code:

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

D'accord, j'ai eu exactement le même problème (le bouton Excel ne s'affiche pas alors que les autres boutons le sont) et il semble que vous deviez inclure vos fichiers JavaScript dans un ordre spécifique, sinon cela ne fonctionnerait pas.

Pour moi, le problème était que j'incluais button.html5.js avant jszip.js, mais vous devez les placer dans cet ordre:

jszip.js
buttons.html5.js

Et vous devez également mettre ces deux fichiers après les fichiers DataTables et DataTables.buttons

Ce qui me pose problème, c’est que si vous les placez dans le mauvais ordre, aucune erreur JavaScript ne s’affiche dans la console du navigateur.

16
Kupay

Vous devriez vous référer aux versions ★html5

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

Raison : Lorsque vous utilisez copy, Excel etc., vous risquez en fait de faire référence à l'implémentation flash, qui ne devrait en réalité être considérée que comme une solution de secours. Flash est supprimé/désactivé de l'iPad et de la plupart des smartphones, c'est pourquoi le bouton Excel ne fonctionne pas. Si vous rencontrez toujours des problèmes, assurez-vous d'avoir inclus ces fichiers de bibliothèque. 

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

Ajoutez simplement ces références avant votre script de table de données. Ça marche pour moi.

Pour générer Datatable, utilisez ceci -

<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>

Et pour le bouton de table de données, utilisez ces références -

<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>
8
sakib rahman

Pour moi, il me manquait l'attribut dom: 'Bfrtip', dans la définition de ma table.

8
Augustin Riedinger

Essayez de charger les bibliothèques JS requises dans l'ordre suivant, si vous rencontrez toujours des problèmes d'affichage des boutons d'exportation DataTable.

<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>

À votre santé!

6
Anjana Silva

J'ai eu le même problème, ce n'était pas à cause des scripts jQuery.

Allez dans les paramètres du navigateur (chrome dans mon cas)> Recherche Flash> 

Cliquez sur Contrôler les informations que les sites Web peuvent utiliser> ils accéderont aux paramètres de contenu (chrome: // paramètres/contenu? Recherche = flash)>

Cliquez sur Flash> 

Dans le bloc Autoriser, ajoutez votre site Web à l'aide du bouton Ajouter.

5
Rajdeep

Je sais que c'est très vieux, mais depuis que j'utilisais Webpack 4, Babel et moi importions les fichiers (ES6), je devais placer jsZip dans le champ d'application global:

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;

J'espère que ça aide

3
jpacareu

L'exportation vers Excel ne fonctionne pas non plus sur Mac. Sur le site Web de datatable: .__ "Le bouton excelHtml5 ne fonctionnera pas du tout dans Safari - comme indiqué dans la documentation du bouton. Cela est dû à une fonctionnalité non implémentée dans Safari."

Notez que même si vous utilisez Chrome dans les produits Apple, celui-ci utilise toujours le moteur de Safari afin que cela ne fonctionne pas.

Cela pourrait être corrigé à l'avenir, mais pour l'instant je viens d'ajouter le bouton CSV

1
Alx

j'ai rencontré le même problème dans Asp.NET MVC 4 . si vous ajoutez vos fichiers CDN/JS dans la page _layout, les boutons ne s'affichent pas dans la page Affichage principal. à la place, ajoutez ces fichiers CDN/JS dans la page que vous utilisez pour la table de données. Assurez-vous également qu’ils sont dans le bon ordre.

jquery.min.js
jszip.min.js
pdfmake.min.js
vfs_fonts.js
buttons.html5.min.js
0
Al Masum Fahim