dataTables导出到Excel按钮未显示

2021/01/02 18:11 · jquery ·  · 0评论

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

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

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

您应该参考★html5版本

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

原因:如果使用copyexcel等等,你实际上在引用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
文章标签: ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!