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

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

第一个解决方案

在项目根目录中创建一个print.css，然后将其添加到您的页面中

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

在该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();
  });

Answer 2

很好的解决方案。我通过扩展标签小部件对此进行了改进。它不仅允许打印所有选项卡，还会放置相应的标题，它会自动从标签定义中获取。打印标题样式可以由print-tab-hdr CSS类自定义。您可以将窗口小部件放入单独的脚本，以及屏幕并将css打印到单独的文件中，如dc03kks所示。然后，主文件中所需的只是将标签连接修改为： $( "#tabs" ).tabs().tabs("tabsPrint"); 。

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

<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>

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

2 个答案: