DataTables的“打印”按钮不起作用，打印空白页

Question

我正在一个使用DataTables插件从数据库构造单词表的项目。 这是我用来创建表格的功能。

var word_data_filtered = filterWordData(filter_states);
words_table = $("#words_generated").DataTable({
    "data" : word_data_filtered,
    "columns" : columns,
    "aLengthMenu": [[25, 50, 100, 200, -1],
            [25, 50, 100, 250, "All"]],
    "pageLength": 100,
    dom: "lBftipr",
    buttons: [
       'print',
    ]
});

按钮是DataTables的附加插件/附加组件。 因此，实际上我将复制并粘贴文件头中包含的各种脚本的主要部分，部分原因是如果丢失了我想知道的内容。

  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js">
 </script>
 <script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css"></script>
 <script src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.min.css"/>
 <script src="https://cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
 <script src="https://cdn.datatables.net/tabletools/2.2.4/swf/copy_csv_xls_pdf.swf"></script>

 <script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
 <script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script>

所以现在我在页面上显示了一个“打印”按钮。 但是在我的Chrome浏览器中，“打印”按钮不起作用。

单击后，将打开一个新选项卡，并将Google chrome的打印面板设置在表格顶部。 但是，打印面板会提示您打印空白页。 打印预览显示空白页（嗯，顶部有一个标题，仅此而已）打印面板下的表看起来与我网页上的表完全一样，所以我假设我已经做了一些实际打印出整个表格的方式。

但是还是。 我真的不知道为什么会这样，我不确定如何进一步进行

Answer 1

打印视图按钮将获取表中显示的数据的副本（基于exportOptions参数中提供的选择器选项），并构造一个新的临时表，该表将显示在新窗口中。

我认为您可能需要指定exportOptions ，以指示打印按钮应打印什么表数据。

https://datatables.net/reference/button/print

Answer 2

我遇到了同样的问题，结果发现在打开的新页面中，您具有来自父页面的所有CSS。 在我的CSS中，我发现此定义将隐藏所有要打印的内容：

@media print {
  body * {
    visibility: hidden;
  }