dataTables导出到Excel按钮未显示

Question

我在jquery dataTables中遇到了问题.iPad和移动设备中未显示"导出到Excel".它在桌面上显示.其他按钮如copy,csv和pdf在iPad和桌面上显示.这是我的代码:

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

Answer 1

好的,所以我遇到了同样的问题(Excel按钮没有显示其他按钮时),看来你必须按照特定的顺序包含你的JavaScript文件,否则它将无法正常工作.

对我来说问题是我在jszip.js之前包含了buttons.html5.js,但你必须按顺序放置它们:

jszip.js
buttons.html5.js

而且你还必须将这两个文件放在DataTables和DataTables.buttons文件之后

我发现有问题的是,如果你按错误的顺序排列它们,浏览器控制台中就不会显示任何JavaScript错误.

Answer 2

对我来说,我dom: 'Bfrtip',在表定义中缺少属性.

Answer 3

我知道这已经很老了，但是由于我使用的是Webpack 4和Babel，并且正在导入文件（ES6），所以我不得不将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;

希望它可以帮助干杯

Answer 4

如果有人在显示DataTable导出按钮时仍有问题,请按以下顺序尝试加载所需的JS库.

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

干杯!

Answer 5

你应该参考这些?html5版本

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

原因:如果使用copy,excel等等,你实际上在引用flash执行,这确实应被视为只是一个后备的风险.从iPad和大多数智能手机上删除/禁用Flash,这就是为什么Excel按钮不起作用的原因.如果仍有问题,请确保已包含这些库文件

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

Answer 6

只需在数据表脚本之前添加这些引用.这个对我有用.

为了生成数据表,请使用此 -

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

对于数据表按钮使用这些参考 -

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

Answer 7

我有同样的问题,这不是因为jquery脚本.

转到浏览器设置(在我的情况下为chrome)>搜索Flash>

点击控制网站可以使用的信息>它将导航到内容设置(chrome:// settings/content？search = flash)>

单击Flash>

在允许栏中,使用添加按钮添加您的网站

Answer 8

如果其他人遇到 webpack 4 中 pdf 按钮未显示的问题，则添加信息，您必须使用：

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;