2

I have 2 div tags in my html code.and I have 1 print button on the top of the page.when I click on the print button , it is giving me everything in the print what I have on html page(means content from both the divs). I want to restrict this print button's functionality till 1st div only and I will add another print button before next div to print that div content independently. Is there any way I can do this?

    <html>
     <body>
      <input type="button" value="Print" class="noprint" onclick="window.print();return false;">
       <div>
          ...
          //my content.Want to print only this div when I will click print button.
          ...
       </div>
       //I will add another print button here which will allow me to print the next div.
       <div>
         ...
          //my content
         ...
        </div>
      </body>
     </html>
Shadow Fiend
  • 45
  • 1
  • 2
  • 9

3 Answers3

2
@media print {
   * 
    {    
     display: none !important;
    }

   .printable
    {
     display: block !important;
    }
}

Then add the printable class to your div you want to print.

TysonWolker
  • 436
  • 2
  • 9
0

try this

$(document).on('click','#pring1',function(e){
    $('#printCSS').remove();
    $('head').append('<link href="stylesheetForBox01.css" media="print" id="printCSS">');
});

$(document).on('click','#pring2',function(e){
    $('#printCSS').remove();
    $('head').append('<link href="stylesheetForBox02.css" media="print" id="printCSS">');
});

in stylesheetForBox01.css page

#box1{
    display: none;
}

in stylesheetForBox02.css page

#box2{
    display: none;
}
Syed Arif Iqbal
  • 1,830
  • 12
  • 16
0

I would recommend using media queries for this one, like such:

@media print {

    .div1 {display:block;}
    .div2 {display:none;}

 }

This will effectively hide div2 (you need to name your elements), while retaining div1.

See http://jsfiddle.net/576ttew8/ for an example.

Furthermore, you can use @media print to further style your div so that it renders better in the printable form.

For more information on @media print (and other media queries), see http://www.w3schools.com/css/css_mediatypes.asp

David Lerner
  • 661
  • 3
  • 15