无法在单击打印按钮时隐藏内容jQuery资料表-编程知识-白鹭情

我想隐藏的页面的内容每当我点击按钮打印的jQuery的资料表。默认行为是主视窗显示在后台，打印预览显示在 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 >
        <table id="example"  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' );

          }
        }
          
      ]
  });
});

每当我单击“打印”按钮时，这是输出！如您所见，模态没有表格无法在单击打印按钮时隐藏内容 jQuery 资料表

这是我尝试过的链接的小提琴

uj5u.com热心网友回复：

我不认为这是可能的。这就是它的作业原理：预览将始终显示正在打印的内容。

打印功能用于window.print()创建一个新视窗，然后写入修改后的 Datatable HTML，这就是正在打印的内容。所以，当你用 CSS 隐藏它时，你不会在预览中看到它，它也不会被打印出来，因为它是相同的内容。

看这里：

https://github.com/DataTables/Buttons/blob/master/js/buttons.print.js#L139

uj5u.com热心网友回复：

这是有效的。
请解释更详细。
我做了一个小提琴给你看，它正在作业：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>