"数据表打印"按钮不起作用，打印空白页

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',
]
});

按钮是数据表的附加插件/附加组件。因此，我实际上将复制并粘贴包含在文件头部的各种脚本中的大部分，部分原因是如果我缺少某些内容，我想知道。

<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 浏览器中，打印按钮不起作用。

单击它后，将打开一个新选项卡，其中谷歌浏览器的打印面板设置在表格顶部。但是，打印面板会提示您打印空白页。打印的预览显示一个空白页(嗯，顶部有一个标题，就是这样(打印面板下的表格看起来与我网页上的表格完全相同，所以我假设我已经做了一些实际打印出整个表格的方法。

但是。我真的不知道为什么会发生这种情况，我不确定如何进一步进行

Answer 1

打印视图按钮将获取表格中显示的数据的副本(基于 exportOptions 参数中给出的选择器选项(，并构建一个新临时表，该表显示在新窗口中。

我认为您可能需要指定exportOptions才能指示打印按钮应该打印哪些表数据。

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

Answer 2

我遇到了同样的问题，结果在它打开的新页面中，您拥有父页面中的所有 CSS。在我的CSS中，我发现这个定义可以隐藏所有打印内容：

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