jQuery 数据表导出到 Excel 按钮未显示

dataTables Export to Excel button is not showing

提问by Ninju

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 数据表中遇到了问题。iPad 和移动设备中未显示“导出到 Excel”。它显示在桌面上。其他按钮（如复制、csv 和 pdf）显示在 iPad 和桌面上。这是我的代码：

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

回答by jpacareu

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

希望能帮到你

回答by Anjana Silva

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!

干杯!

回答by Kupay

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 之前包含了 button.html5.js，但你必须按以下顺序放置它们：

jszip.js
buttons.html5.js

And you also have to put these two files after the DataTablesand DataTables.buttonsfiles

并且您还必须将这两个文件放在DataTablesandDataTables.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 错误。

回答by Augustin Riedinger

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

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

回答by davidkonrad

You should refer to the ★html5versions

你应该参考★html5版本

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

Reason: When using copy, exceletc, 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

回答by sakib rahman

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>

回答by Rajdeep

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

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

回答by Alx

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。来自数据表的网站：“excelHtml5 按钮在 Safari 中根本不起作用 - 正如按钮文档中所述。这是因为 Safari 中未实现的功能。”

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

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

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

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

回答by Al Masum Fahim

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