Home/ Questions/Q 8199215
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T06:07:32+00:00

I have a webpage with several divs. User should be able to print one

  • 0

I have a webpage with several divs. User should be able to print one div (selected content) or the entire page. If the users prints the entire page it should maintain the header, footer, etc. I can make it print either one section or the entire page, but I can’t figure out how to do both gracefully. My current css is using the @media print like so:

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

Using jQuery, I added the class printArea to the selected section and then called 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();
});

I have tried adding and removing a class to the body but the issue is that jQuery removes the class name before the job actually prints. Any ideas on how I could print a section or the entire page? The true problem comes in when you print a section and then use ctrl + p to print.

Thanks in advace!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all, you should separate the content from header and footer. Use the following code to see the working example:

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

    I hope this helps.

    • 0