Printing specific div content with css media type print?

Question

i have html which contain frames like below

  <frameset rows="60,*" border="0" frameborder="0">
    <frame name="frameA">
    <frameset cols="120,*" >
      <frame name="frameB" frameborder=0 >
      <frame name="frameC">
    </frameset>
  </frameset>

Inside frame C i have div with id "myDivToPrint". I want when user click browser print, it just print the content of div myDivToPrint. Here is my relevant css

CSS

@media print {
    #myDivToPrint {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 18px;
    }
}

html

 <div  id="myDivToPrint" class="page-container myDivToPrint">
  </div>

But it does not seem to have any impact on print/print preview(firefox displays all frame content and chrome displays only top frame content under print preview). Any ideas?

Reference for above approach :- BC post at Print the contents of a DIV

The print div will be fixed relative to the frame viewport, you will also need to make frames a and c have the fixed styles too — Pete, Nov 27 '13 at 11:08
@Pete. It would be helpful if you can elaborate your comment.i could not understand this :( — emilly, Nov 27 '13 at 11:39
You are positioning your div fixed - this means that it is usually positioned to the viewport but as your div is inside an iframe, you are just covering the whole of the iframe. As your print is being called from outside of the iframe, you need to make sure that it covers the whole of the main viewpoprt so you need to add the following styles to frame A and Frame c when you print `height: 100%; width: 100%; position: fixed;` — Pete, Nov 27 '13 at 12:17

score 1 · Answer 1 · answered Nov 27 '13 at 16:05

1

You must hide the elements you don't want to print. Something like this:

@media print {
    #myDivToPrint {
       ...
    }

    #elementYouDontWantToPrintId {
       display:none;
    }

}

answered Nov 27 '13 at 16:05

reese

99
8

score 1 · Answer 2 · answered Jul 29 '14 at 20:44

1

use a new window with javascript easy.

        function printout() {

        var newWindow = window.open();
        newWindow.document.write(document.getElementById("output").innerHTML);
        newWindow.print();
    }

answered Jul 29 '14 at 20:44

Peter S McIntyre

409
4
12

Printing specific div content with css media type print?

2 Answers2