dataTables导出到Excel按钮未显示|jquery问答

我在jquery dataTables中有问题。iPad和移动设备中未显示“导出到Excel”。它显示在桌面上。iPad和桌面上将显示其他按钮，例如复制，csv和pdf。这是我的代码：

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

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

希望它可以帮助干杯

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

干杯!

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

好的，所以我遇到了同样的问题（Excel按钮未显示，而其他按钮同时显示），而且看来您必须按特定顺序包含JavaScript文件，否则它将无法正常工作。

对我来说，问题是我在jszip.js之前加入了buttons.html5.js，但是必须按以下顺序放置它们：

jszip.js
buttons.html5.js

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

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

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

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

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

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

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

转到浏览器设置（在我的情况下为Chrome）>搜索Flash>

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

点击Flash>

在“允许”块中，使用“添加”按钮添加您的网站

在Mac上也无法导出到Excel。在数据表的网站上：“ excelHtml5按钮根本无法在Safari中使用-如该按钮的文档中所述。这是因为Safari中未实现的功能。”

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

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

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

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

如果其他人对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;

本文地址：http://jquery.askforanswer.com/datatablesdaochudaoexcelanniuweixianshi.html
文章标签：datatables , jquery
版权声明：本文为原创文章，版权归 admin 所有，欢迎分享本文，转载请保留出处！

文件下载