dataTables 导出到 Excel 按钮未显示答案

【问题标题】：dataTables Export to Excel button is not showingdataTables 导出到 Excel 按钮未显示
【发布时间】：2023-03-29 13:14:01
【问题描述】：

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

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

【问题讨论】：

你弄明白了吗？遇到同样的问题，脚本顺序正确。
在我的情况下，文件“button.html5.js”加载时没有内容。原因是 .htaccess 中的设置不正确，它使用“html”重定向了所有文件。许多CMS系统使用“html”重定向文件，看看内容是值得的。
@SarahTrees 如何测试“button.html5.js”加载时没有内容？我的顺序已经正确，但是 excel 按钮仍然没有显示。

标签： jquery datatables

【解决方案1】：

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

干杯！

【讨论】：

谢谢..这对我有用..可能是库版本问题。

【解决方案2】：

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

希望对你有帮助干杯

【讨论】：

谢谢！这是我遗漏的关键部分，在其他任何地方都没有看到它的回答。应添加到数据表文档中
Browserify : global.JSZip = require("jszip"); 我怀疑这是因为 xlsx 本质上是一个压缩的 xml 文件。太糟糕了，这无声无息地失败了，控制台中的错误消息可以为我节省一些时间
谢谢！使用 Laravel webpack 通过添加 window.JSZip = require('jszip'); 解决
这正是我所需要的......在任何其他线程上都找不到这个！这工作，与我的要求相关的一些调整。谢谢！
这绝对有帮助！！

【解决方案3】：

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

【讨论】：

谢谢！，这解决了我的问题，但为什么在这里使用dom？和“Bfrtip”？
我不记得在哪里找到了解决方案，但我认为此链接对 datatables.net/forums/discussion/29527/dom-bfrtip 有所帮助
感谢 dom: 'Bfrtip',
这个在文档本身但是不知道它的用途。
dom: 'Bfrtip'的使用是表格的格式。很难记住每个字母，但f 用于过滤器，t 用于表格，B 用于按钮，i 用于信息，p 用于分页。因此，例如，dom: 'Bfpitipf' 顶部会有按钮，然后是搜索框，然后是分页，然后是那个小信息片段，然后是表格，然后是信息，然后是分页，然后是搜索框。 dom: 'it' 不会显示按钮、过滤器或分页，只显示信息行和表格。

【解决方案4】：

好的，我遇到了同样的问题（Excel 按钮未显示，而其他按钮显示），看来您必须按特定顺序包含 JavaScript 文件，否则它将不起作用。

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

jszip.js
buttons.html5.js

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

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

【讨论】：

【解决方案5】：

您应该参考★html5 版本

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

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

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

【讨论】：

我已经包含了所有这些（jszip.min.js、pdfmake.min.js、vfs_fonts.js、buttons.html5.min.js）库。
@Ninju，是的 - 只是提醒一下，请参考excelHtml5。

【解决方案6】：

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

为了生成数据表使用这个 -

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

【讨论】：

【解决方案7】：

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

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

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

点击 Flash >

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

【讨论】：

即使在 2017 年也只允许 Flash 版本你不想这样做

【解决方案8】：

如果其他人对 webpack 4 不显示 pdf 按钮有问题，则添加信息，您必须使用：

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;

【讨论】：

【解决方案9】：

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

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

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

【讨论】：

只是一个更新，说“导出到 Excel”现在在 OSX 上使用 Safari 和 Chrome 对我有用。不过，您将需要window.JSZip = jsZip 行，如此处所述：stackoverflow.com/a/51469094/219238

【解决方案10】：

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

【讨论】：

【解决方案11】：

对我来说，导入非缩小版的数据表解决了按钮消失的问题。

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

我下载了包含所需库的数据表的串联版本。无需额外导入。

【讨论】：

【解决方案12】：

很多人经常遇到这个问题，通常与他们如何安排他们的 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>

观看此视频https://youtu.be/8vzTRHrwHlg 详细说明如何解决您的问题

【讨论】：

【解决方案13】：

也许你正在使用一个 JS 文件。如果您正在使用此 $document.ready(function() {}); 这 $document.ready(function() {});去掉它。然后将显示该按钮。

$(document).ready(function() { // <-remove;
let data = {
    "get-list": "history",
    symbol: 'coke'
};
$('#userhistoryTable').DataTable({
        order: [ [ 3, "DEC" ] ],
        destroy: true,
        dom: 'Blfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        ajax: {
            url: 'curl',
            type: 'GET',
            data : data,
            dataSrc: '',
            error: function (e) {
                errorHandler(e);
            }
        },
        columns: [
            {data: "type"},
            {data: "price"},
            {data: "quantity"},
            {
                data: "time", 
                render: function(time) {
                    return moment(time).format('YYYY-MM-DD HH:mm');
                }
            }
        ]
    });
}); // <-remove;

【讨论】：

【解决方案14】：

试试这个

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"> 
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css">

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.print.min.js"></script>

<script>
    $(document).ready(function() {
        $('#example').DataTable( {
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        } );
    } );
</script>

datatables.net:

【讨论】：