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

您应该参考★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 3

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

Answer 4

只需在数据表脚本之前添加这些引用即可。它对我有用。

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

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

如果有人在显示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 6

我有同样的问题，这不是因为jquery脚本。

转到浏览器设置（我的情况下为chrome）＆gt; 搜索Flash＆gt;

点击控制网站可以使用的信息＆gt;它将导航到内容设置（chrome：// settings / content？search = flash）＆gt;

点击Flash＆gt;

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

Answer 7

我知道这已经很老了，但是由于我使用的是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 8

导出到Excel也不能在Mac上运行。来自datatable的网站：＆＃34; excelHtml5按钮在Safari中根本不起作用 - 如按钮的文档中所述。这是因为Safari中未实现的功能。＆＃34;

请注意，即使您在苹果产品中使用Chrome，它仍会使用Safari的引擎，因此无法使用。

将来可能会修复，但现在我只添加了CSV按钮

Answer 9

我在Asp.NET MVC 4中遇到了同样的问题。问题是，如果您在_layout页面中添加CDN / JS文件，那么按钮将不会显示在主视图页面中。而是将这些CDN / JS文件添加到您用于数据表的页面中。还要确保它们的顺序正确。

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

Answer 10

如果其他人对pdf按钮无法在webpack 4中显示问题添加信息，则必须使用：

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;

Answer 11

对我来说，导入非缩小版的数据表解决了按钮消失的问题。

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

我下载了包含所需库的数据表的连接版本。无需额外导入。

Answer 12

很多人经常遇到这个问题，通常与他们如何安排 css 和 javascript 文件有关。这种安排对我有用。

sub $imm, %rsp

观看此视频https://youtu.be/8vzTRHrwHlg，其中详细介绍了如何解决您的问题

dataTables导出到Excel按钮未显示

12 个答案: