jquery - 使用 jquery PrintArea 打印页面的所有选项卡

Question

我有一个问题，我想知道是否有人可以帮助我，假设我在头部部分有一个 htlm 页面，我正在使用

  <script src="../js/jquery.PrintArea.js" type="text/javascript"></script>

然后我使用选项卡和打印按钮的功能，例如

  <script type="text/javascript">    
$(document).ready(function () {         
    $( "#tabs" ).tabs();        
    $("#print_button").click(function(){
    $("div.PrintArea").printArea( );
   });

......然后在正文中我显示选项卡和打印按钮，

  <div id="tabs">
      <ul>
      <li><a href="#tabs-1">TAB1</a></li>
      <li><a href="#tabs-2">TAB2</a></li>
      <li><a href="#tabs-3">TAB3</a></li>         
      </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
 </div>
 <button type="submit" id="print_button" ><img src="../images/printer.png" alt="print icon"  style="vertical-align:text-bottom;"/> PRINT PAGE </button>

问题1:就像我正在打印事件选项卡一样，但是，我想一次打印所有选项卡!单击一下问题2:如何调整打印尺寸以适合页面？

我可以用 css 做到这一点吗？但现在我只想使用 jquery.PrintArea.js .. :(

请提供一些帮助，我确信这是一项简单的任务，但我现在已经堆栈了...任何帮助将非常感激..预先感谢您

Answer 1

好的，伙计们，我找到了解决我的问题的方法，并且在这里像魅力一样工作，以防其他人需要它，

第一个解决方案

1. 在元素根目录中创建一个 print.css 并将其添加到页面中

      <link rel="stylesheet" href="../css/print.css" type="text/css" media="print"/>
   

2. 在该 css 上添加以下行

   .ui-tabs-nav { display: none; }
   .ui-tabs .ui-tabs-hide { display: block !important; }
   .ui-tabs .ui-tabs-panel { display: block !important; }
   

工作完成了..

第二个解决方案

只需添加以下脚本来处理您的打印按钮，但不是全局解决方案，我更喜欢第一个

  $("#printButton").click(function(){
  // Before printing show all the tab panel contents
  $('.ui-tabs-panel').show();
  // Print the page
  window.print();
  // After printing hide back all the tab panel contents which are supposed to be hidden
  $('.ui-tabs-panel[aria-hidden=true]').hide();
  });

谢谢大家