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

我有一个问题，我想知道是否有人可以帮助我，想象一下我使用的标题部分有一个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..：

请帮忙我相信这是件容易的事，但我现在忙得不可开交……任何帮助都是非常感谢的。。

---

提前谢谢大家好了，伙计们，我找到了解决问题的办法，并且在这里发挥了巨大的作用，以防其他人需要它

第一种解决方案

在项目根目录中创建print.css，然后像这样将其添加到页面中

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

工作完成了

第二种解决方案

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

  $("#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();
  });

---

谢谢大家

好了，伙计们，我找到了解决问题的方法，并且在这里发挥了巨大的作用，以防其他人需要它

第一种解决方案

在项目根目录中创建print.css，然后像这样将其添加到页面中

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

工作完成了

第二种解决方案

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

  $("#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();
  });

---

谢谢大家

很好的解决方案。我通过扩展tabs小部件对此进行了改进。它不仅允许打印所有选项卡，还可以放入相应的标题，该标题将自动从选项卡定义中获取。打印标题样式可以通过打印选项卡hdr CSS类进行自定义。您可以将小部件放入单独的脚本中，也可以将屏幕和css打印到单独的文件中，如dc03kks所示。然后，在主文件中只需将选项卡连接修改为：$tabs.tabs.tabstabsPrint

以下是单个文件中的完整代码：

<style type="text/css">
  body{font:9pt arial}
  @media print{
  .ui-tabs-nav { display: none; }
  .ui-tabs .ui-tabs-hide { display: block !important; }
  .ui-tabs .ui-tabs-panel { display: block !important; }
  .print-tab-hdr{font:bold 1.2em arial;color:maroon}
  }
  @media screen {
  .print-tab-hdr{display:none}
  }
</style>
<script type="text/javascript">
  $(function() {
    $.widget( "ui.tabs", $.ui.tabs, { //extend tabs widget to allow printing all tabs WITH TAB HEADERS
      tabsPrint: function() {
        var tabdivs = this.element.find("a");
        for(i=0;i<tabdivs.length;i++){
            var hdrMarkup = "<div class=print-tab-hdr>" + tabdivs[i].text +  "</div>";
            var targetDiv = $(tabdivs[i].getAttribute("href"));
            targetDiv.prepend(hdrMarkup);
        }
      }
    });
    //now hookup tabs with the print functionality
    $( "#tabs" ).tabs().tabs("tabsPrint");
  });
</script>

---

很好的解决方案。我通过扩展tabs小部件对此进行了改进。它不仅允许打印所有选项卡，还可以放入相应的标题，该标题将自动从选项卡定义中获取。打印标题样式可以通过打印选项卡hdr CSS类进行自定义。您可以将小部件放入单独的脚本中，也可以将屏幕和css打印到单独的文件中，如dc03kks所示。然后，在主文件中只需将选项卡连接修改为：$tabs.tabs.tabstabsPrint

以下是单个文件中的完整代码：

<style type="text/css">
  body{font:9pt arial}
  @media print{
  .ui-tabs-nav { display: none; }
  .ui-tabs .ui-tabs-hide { display: block !important; }
  .ui-tabs .ui-tabs-panel { display: block !important; }
  .print-tab-hdr{font:bold 1.2em arial;color:maroon}
  }
  @media screen {
  .print-tab-hdr{display:none}
  }
</style>
<script type="text/javascript">
  $(function() {
    $.widget( "ui.tabs", $.ui.tabs, { //extend tabs widget to allow printing all tabs WITH TAB HEADERS
      tabsPrint: function() {
        var tabdivs = this.element.find("a");
        for(i=0;i<tabdivs.length;i++){
            var hdrMarkup = "<div class=print-tab-hdr>" + tabdivs[i].text +  "</div>";
            var targetDiv = $(tabdivs[i].getAttribute("href"));
            targetDiv.prepend(hdrMarkup);
        }
      }
    });
    //now hookup tabs with the print functionality
    $( "#tabs" ).tabs().tabs("tabsPrint");
  });
</script>

---

谢谢Vijay Jagdale的好话，真的很感激，，非常感谢Vijay Jagdale的美言，非常感谢，，您的解决方案也得到了极大的扩展。。