Jquery “数据表导出到Excel”按钮未显示

我在jquery数据表中遇到了一个问题。iPad和移动设备中没有显示“导出到Excel”。它显示在桌面上。其他按钮，如复制、csv和pdf，也显示在iPad和桌面上。这是我的密码：

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

---

您应该参考

★html5

版本

$（'#productDatatable'）.DataTable({
dom:'Bfrtip'，
按钮：[
“copyHtml5”、“excelHtml5”、“pdfHtml5”、“csvHtml5”
]
} );

原因：当使用

复制

、

excel

等时，实际上您有引用flash实现的风险，这实际上只应被视为一种回退。iPad和大多数智能手机都已删除/禁用Flash，这就是Excel按钮无法工作的原因。如果仍然存在问题，请确保已包含这些库文件

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

---

好吧，我也遇到了同样的问题（Excel按钮不显示，而其他按钮显示），而且似乎您必须按特定顺序包含JavaScript文件，否则它将无法工作

对我来说，问题是我在jszip.js之前包含了buttons.html5.js，但你必须按以下顺序排列：

jszip.js
buttons.html5.js

您还必须将这两个文件放在

DataTables

和

DataTables.button

文件之后

---

我发现的问题是，如果您将它们按错误的顺序放置，浏览器控制台中不会显示任何JavaScript错误。

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

---

干杯

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

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

---

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

转到浏览器设置（我使用的是chrome）> 搜索Flash>

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

点击Flash>

---

在“允许”块中，使用“添加”按钮添加网站，只需在数据表脚本之前添加这些引用即可。它对我有用

要生成Datatable，请使用以下命令-

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

---

导出到Excel在Mac上也不起作用。从datatable的网站： “excelHtml5按钮在Safari中根本不起作用-如按钮文档中所述。这是因为Safari中有一个未实现的功能。”

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

---

它可能会在将来被修复，但现在我只是为我添加了CSV按钮，我的表定义中缺少了

dom:'Bfrtip'，

属性。

我知道这太旧了，但因为我使用的是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;

希望能有帮助

---

干杯

添加信息如果其他人对网页4中未显示的pdf按钮有问题，您必须使用：

从“pdfMake/build/pdfMake”导入pdfMake
从“pdfmake/build/vfs_字体”导入PDF字体
从“jsZip”导入jsZip
pdfMake.vfs=pdfFonts.pdfMake.vfs；
window.pdfMake=pdfMake；
window.JSZip=JSZip；

对我来说，导入数据表的非精简版本解决了按钮消失的问题

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

DataTables/DataTables.css
DataTables/DataTables.js
DataTables/DataTables.min.css
DataTables/DataTables.min.js

---

我正在下载包含所需库的数据表的连接版本。不需要额外的导入。

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

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

@*CSS文件*@
@*JQuery初始值设定项*@

---

观看此视频，它详细介绍了如何解决您的问题

我已经包括了所有这些库（jszip.min.js、pdfmake.min.js、vfs_font.js、buttons.html5.min.js）。Ninju，是的-只是一个提醒，请参阅

excelHtml5

。您明白了吗？遇到了同样的问题，脚本顺序正确。在我的例子中，“button.html5.js”文件没有加载内容。原因是.htaccess中的设置不正确，它重定向了所有带有“html”的文件。许多CMS系统使用“html”重定向文件，值得一看内容。@SarahTrees如何测试“button.html5.js”加载时没有内容？我的已按正确顺序排列，但excel按钮仍不显示。谢谢！，这解决了我的问题，但是为什么要在这里使用

dom

？和“Bfrtip”？我不记得我在哪里找到了解决方案，但我认为这个链接有帮助，感谢dom:“Bfrtip”，这在文档本身中，但不知道它的用法。

dom:“Bfrtip”

的用法是表的格式。很难记住每个字母，但

f

表示过滤器，

t

表示表格，

B

表示按钮，

i

表示信息，

p

表示分页。例如，

dom:'Bfpitipf'

将在顶部有按钮，然后是搜索框，然后是分页，然后是小信息块，然后是表格，然后是信息，然后是分页，再是搜索框<代码>dom:“它”不会显示按钮、过滤器或页面，只显示信息行和表格。只是更新一下，说导出到Excel在OSX上的Safari和Chrome对我有用。您将需要

window.JSZip=JSZip

行，如此处所述：谢谢！这是我遗漏的关键部分，在其他任何地方都没有看到答案。应添加到数据表docsBrowserify:

global.JSZip=require（“JSZip”）我怀疑这是因为xlsx本质上是一个z