Question

我有一个包含多个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进行打印时，会出现真正的问题。

先谢谢！

Answer 1

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

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

我希望这会有所帮助。

我需要能够打印我的页面的一部分，但也保持打印整个页面的能力

1 个答案: