单击打印按钮时无法隐藏内容 jQuery 数据表

Question

我想在单击 jQuery 数据table[= 的 按钮打印 时隐藏页面内容27=]。默认行为是主要 window 显示在后台，打印预览显示在 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>0,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>0,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>,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>5,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>4,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>2,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' ); } } ] }); });

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

这是我尝试过的 fiddle link

Answer 1

这是有效的。
请详细说明一下
我制作了一个 fiddle 供您使用：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>0,800</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>0,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>,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>5,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>4,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>2,000</td>
          </tr>
        </tdbody>
      </table>
    </div>

Answer 2

你藏错了。

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

所以你有两件事：

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

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

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 是您想要的吗？您想在弹出 window 中隐藏 table，但在打印中可见？

您也可以使用媒体查询来做到这一点：

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

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

单击打印按钮时无法隐藏内容 jQuery 数据表

Unable to Hide content on click print button jQuery Datatable

javascript

datatable

jquery