文章/答案/技术大牛

发布

社区首页 >问答首页 >无法隐藏内容，请单击“打印”按钮jQuery数据表

问无法隐藏内容，请单击“打印”按钮jQuery数据表
EN

Stack Overflow用户

提问于 2021-12-23 15:39:02

回答 2查看 597关注 0票数 1

每当我单击按钮、打印 of 、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' );

          }
        }
          
      ]
  });
});

这是输出，每当我点击打印按钮！如您所见，模态没有打开表。

下面是我尝试过的链接的小提琴

javascript

jquery

datatable

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-12-23 21:43:09

你隐瞒了错误的东西。

win customize 函数的参数是弹出窗口--不要隐藏这个窗口！把主窗口藏起来！

所以你有两件事：

win：那是弹出式窗口。(也不确定您是否能够访问jQuery，请先尝试一下)。
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);
        }

      }

编辑：这是你想要的吗？你想把表隐藏在弹出窗口中，但在打印中却是可见的？

通过媒体查询，您也可以这样做：

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规则。

票数 2

Stack Overflow用户

发布于 2021-12-23 18:15:23

这很管用。

请详细解释一下。

我做了一把小提琴给你看，这很管用：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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70464305

复制

相似问题

问无法隐藏内容，请单击“打印”按钮jQuery数据表
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法隐藏内容，请单击“打印”按钮jQuery数据表EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法隐藏内容，请单击“打印”按钮jQuery数据表
EN