1

我有一个包含几个 div 的网页。用户应该能够打印一个 div（选定的内容）或整个页面。如果用户打印整个页面，它应该维护页眉、页脚等。我可以让它打印一个部分或整个页面，但我不知道如何优雅地完成这两个操作。我当前的 css 正在使用 @media 打印，如下所示：

  @media print
   {
    body * { visibility: hidden; }
    .printArea * { visibility: visible; }
   }

使用 jQuery，我将类添加printArea到所选部分，然后调用 window.print()。

$("a.printSection").live("click", function(){
    //the id of the sectionToPrint is actually passed in via metadata plug-in
    $("div#sectionToPrint").addClass('printArea');
    window.print();
});

我尝试在正文中添加和删除一个类，但问题是 jQuery 在实际打印作业之前删除了类名。关于如何打印一个部分或整个页面的任何想法？当您打印一个部分然后使用 ctrl + p 打印时，真正的问题就出现了。

提前感谢！

4

1 回答 1

2

首先，您应该将内容与页眉和页脚分开。使用以下代码查看工作示例：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" 
           src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
        <script type='text/javascript'>
            var isSelected = false;

            // To print the entire page
            function printAll() {
                $('style[media=\"print\"]').remove();
                isSelected = false;
            }
            // To print the slected content
            function printSelected() {
              if(!isSelected) {
                $('<style type=\"text/css\" media=\"print\">body{visibility:hidden}\
                     .printArea{visibility:visible}</style>').appendTo('head');
                     isSelected = true;
                }
            }
        </script>
    </head> <body>
        <a href="#" onclick="printAll();return false;">Print All</a>
        <a href="#" onclick="printSelected(); return false;">Print Selected</a>
        <div id="header"> header content here </div>
        <div id="content">
            body content outside the print area
            <div class="printArea">body content inside the print area</div>
            more body content outside the print area
         </div>
        <div id="footer"> footer content here </div>
    </body>
</html>

我希望这有帮助。

于 2012-07-03T01:53:24.677 回答