无法在单击打印按钮 jQuery Datatable 时隐藏内容答案

【问题标题】：Unable to Hide content on click print button jQuery Datatable无法在单击打印按钮 jQuery Datatable 时隐藏内容
【发布时间】：2022-01-24 13:52:43
【问题描述】：

我想在点击jQuery Datatable的按钮打印时隐藏页面内容。默认行为是主窗口显示在后台，打印预览显示在 Modal 弹出窗口中！

这是我尝试过的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Data Table</title>
    <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.1.0/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="./styles.css">
    
</head>

<body>
    <div class="container">
        <table id="example" class="display" style="width: 100%;">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tdbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                </tr>
                <tr>
                    <td>Gavin Cortez</td>
                    <td>Team Leader</td>
                    <td>San Francisco</td>
                    <td>22</td>
                    <td>2008/10/26</td>
                    <td>$235,500</td>
                </tr>
                <tr>
                    <td>Martena Mccray</td>
                    <td>Post-Sales support</td>
                    <td>Edinburgh</td>
                    <td>46</td>
                    <td>2011/03/09</td>
                    <td>$324,050</td>
                </tr>
                <tr>
                    <td>Brielle Williamson</td>
                    <td>Integration Specialist</td>
                    <td>New York</td>
                    <td>61</td>
                    <td>2012/12/02</td>
                    <td>$372,000</td>
                </tr>
            </tdbody>
        </table>
    </div>

    <script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/buttons/2.1.0/js/dataTables.buttons.min.js"></script>
    <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/buttons/2.1.0/js/buttons.print.min.js"></script>

    <script language="javascript" type="text/javascript" src="./scripts.js"></script>
</body>

</html>

JS 文件

$(document).ready(function() {
  $('#example').DataTable({
      dom: 'Bfrtip',
      buttons: [
        {
          extend: 'print',
          customize: function(win) {
            $(win.document.body).css( 'opacity', '0' )
                        
 
            $(win.document.body).find('print-preview-app').css('opacity', '1' );

          }
        }
          
      ]
  });
});

这是我点击打印按钮时的输出！如您所见，模态表上没有表格

这是我尝试过的小提琴link

【问题讨论】：

标签： javascript jquery datatable

【解决方案1】：

你隐藏了错误的东西。

customize 函数的win 参数是弹出窗口 - 不要隐藏那个！隐藏主窗口！

所以你有两件事：

win：就是弹窗。（也不确定您是否可以访问那里的 jQuery，请先尝试）。
window: 是你的主窗口。

Here 是一个工作示例：打印预览弹出窗口显示表格，但主窗口隐藏内容。当您关闭打印预览时，我还添加了代码以恢复主窗口的不透明度。

customize: function(win) {
  console.log('Hiding the main window.');
  $(window.document.body).css( 'opacity', '0' )
  // Just to make sure, change something in the popup window
  win.document.body.querySelector('table').style.border = '2px dotted tomato';
  // ALSO make sure that we bring back the main window opacity.
  win.onbeforeunload = () => {
          console.log('Before unload, return .')
          $(window.document.body).css('opacity', 1);
        }

      }

编辑：this 是你想要的吗？您想在 popup 窗口中隐藏表格，但在打印中可见？

您也可以这样做，使用媒体查询：

const style = document.createElement('style');
style.innerHTML = `
@media screen {
    table {
        opacity: 0;
    }
}
@media print {
    table {
        opacity: 1;
    }
}
`;
win.document.body.appendChild(style);

media screen { } 规则将仅匹配“屏幕”视图 - 普通浏览器窗口，而使用 media print {} 您可以创建仅在打印页面上有效的 css 规则。

【讨论】：

您好！主窗口仍然显示为红色虚线，再次检查您的代码！
您如何称呼“主窗口”——带有打印按钮的窗口，还是弹出窗口？此外，红色虚线是我向您展示如何绘制弹出窗口的方法。
通过新的修改，弹出窗口中的表格被隐藏，但在打印预览中可见。只有一件事是DataTable的标题在弹出窗口中仍然可见
是的，这是故意的。你不应该盲目地从这里复制粘贴代码，直到它起作用——你能弄清楚还缺少什么吗？我在那里用table { opacity: 0 } 规则隐藏了什么？您将如何隐藏整个文档正文？
你是对的！我用新的 @media screen { body { opacity: 0 } } 更改了 css 规则。现在整个文档正文都按照我的意愿隐藏了！

【解决方案2】：

这是有效的。
请详细解释一下。
我为你做了一个小提琴，看到它正在工作：https://jsfiddle.net/bogatyr77/76t0aLpq/1/

$(document).ready(function() {
  $('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [
      'print'
    ]
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.1.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.1.0/js/buttons.print.min.js"></script>
<link href="https://cdn.datatables.net/buttons/2.1.0/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet" />

 <div class="container">
      <table id="example" class="display" style="width: 100%;">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
        <tdbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
          </tr>
          <tr>
            <td>Gavin Cortez</td>
            <td>Team Leader</td>
            <td>San Francisco</td>
            <td>22</td>
            <td>2008/10/26</td>
            <td>$235,500</td>
          </tr>
          <tr>
            <td>Martena Mccray</td>
            <td>Post-Sales support</td>
            <td>Edinburgh</td>
            <td>46</td>
            <td>2011/03/09</td>
            <td>$324,050</td>
          </tr>
          <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$372,000</td>
          </tr>
        </tdbody>
      </table>
    </div>

【讨论】：

首先感谢您的宝贵时间！我的目标是只在打印预览中显示数据！我希望通过将背景中主窗口的不透明度设置为0来实现这一点，这样主窗口上的就不会显示了！我希望清楚
这是我尝试过的小提琴link