dataTables导出到Excel按钮未显示

I have a problem in jquery dataTables. The "Export to Excel" is not showing in iPad and mobile devices. It is showing in desktop. Other buttons like copy, csv and pdf are showing in iPad and desktop. Here is my code :

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

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

9 个解决方案

#1

Okay so I had the same exact problem (Excel button not showing while the other buttons are), and it appears that you have to include your JavaScript files in a specific order, or it won't work.

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

For me the problem was that I was including buttons.html5.js before jszip.js, but you have to put them in this order:

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

jszip.js
buttons.html5.js

And you also have to put these two files after the DataTables and DataTables.buttons files

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

What I find problematic is that if you put them in the wrong order, there isn't any JavaScript error displayed in the browser console.

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

#2

You should refer to the ★html5 versions

你应该参考★html5版本

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

Reason: When using copy, excel etc, you are in fact in risk of referring to the flash implementation, which really should be considered as a fallback only. Flash is removed / disabled from iPads and most smartphones, thats why the Excel button not is working. If you still have problems, ensure you have included these library files

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

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

#3

For me I was missing the dom: 'Bfrtip', attribute in my table definition.

对我来说,我错过了我的表定义中的dom:'Bfrtip'属性。

#4

I had same problem, it was not because of jquery scripts.

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

Go to browser setting(chrome in my case) > Search Flash >

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

Click on Control what information websites can use > it will navigate to content settings (chrome://settings/content?search=flash) >

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

Click on Flash >

单击Flash>

In the Allow block add your website using Add button

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

#5

Just add these references before your data table script. It works for me.

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

For generating Datatable use this -

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

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

And for data table button use these references -

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

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

#6

I know this is super old but since I was using Webpack 4 and Babel and I was importing the files (ES6) I had to put in the global scope the jsZip:

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

Hope it helps Cheers

希望它有助于干杯

#7

Try loading required JS libraries in the following order, if anyone still having issues in showing the DataTable export buttons.

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

Cheers!

#8

Export to Excel doesn't work on Mac either. From the datatable's website: "The excelHtml5 button will not work in Safari at all - as noted in the button's documentation. This is because of an unimplemented feature in Safari."

导出到Excel也不适用于Mac。来自datatable的网站:“excelHtml5按钮在Safari中根本不起作用 - 正如按钮的文档中所述。这是因为Safari中未实现的功能。”

Note that even if you use Chrome in apple products, it still uses Safari's engine so it won't work.

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

It might be fixed in the future but for now I just added the CSV button

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

#9

i ran into the same problem in Asp.NET MVC 4. the thing is if you add your CDN/JS files in _layout page then the buttons wont show in Main View page. instead add those CDN/JS files into the page you are using for data Table. also make sure they are in correct order.

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

#1