How to use JavaScript to print the contents on a div?

Question

I would like to use the print() function to print the contents of a <div class="pagecontent"></div>

I know you can do something like onClick="window.print()" but this prints the entire window...I only want the contents of .pagecontent to be printed.

What's the easiest way I can go about doing this using JavaScript or jQuery?

possible duplicate of [javascript to print contents of only specific
](http://stackoverflow.com/questions/2955237/javascript-to-print-contents-of-only-specific-div) — Tim S. Van Haren, Mar 15 '12 at 16:42
Is this not a duplicate of this http://stackoverflow.com/questions/1071962/how-to-print-part-of-rendered-html-page-in-javascript ? — Ender Wiggin, Mar 15 '12 at 16:43
to see the similar question with answer http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div — , Jul 08 '13 at 06:33

score 3 · Answer 1 · answered Mar 15 '12 at 16:42

Easiest way is to define a stylesheet that applies for @media=print. It would basically have something like:

* { 
   display: none;  /* hide all elements when printing */
}

.pageContent {
   display: block; /* make any class="pageContent" elements visible while printing */
}

Of course, this would make the pageContent elements visible, but anything inside them would still be invisible from the * rule. You'll have to play with this and list only the top-level elements that should be hidden.

score 2 · Answer 2 · answered Mar 15 '12 at 16:46

You can add the contents of an element to an iframe and then print the iframe.

HTML --

<span>Print Just Me.</span> I'll be omitted.<br />
<iframe id="iframe"></iframe>

JS --

$('span').on('click', function () {
    $('#iframe').contents().find('body').html($(this).html());
    window.frames['iframe'].print();
});

Here is a demo: http://jsfiddle.net/zaF3K/

You can also hide the iframe so this happens behind the scenes:

#iframe {
    display : none;
}

Here is a demo: http://jsfiddle.net/zaF3K/1/

score 1 · Answer 3 · answered Mar 15 '12 at 16:41

1

There is the jqprint jquery plugin, take a look

http://archive.plugins.jquery.com/project/jqPrint

answered Mar 15 '12 at 16:41

kappa

1,559
8
19

OP said "without javascrsipt or jquery" – Marc B Mar 15 '12 at 16:43
1

@MarcB "What's the easiest way I can go about doing this using JavaScript or jQuery?" directly from the post. He said using javascript or jQuery – jzworkman Mar 15 '12 at 16:44
sigh... right. lemme just go prop my eyes open with a couple 2x4s. – Marc B Mar 15 '12 at 16:46
In that case you have to generate a new page with only the content you want to print. Since even opening a popup window and putting your content there to print, is "javascript") – kappa Mar 15 '12 at 16:46

score 1 · Answer 4 · answered Mar 15 '12 at 16:58

if you want to using javascript than try this

 window.printItn = function() {

                var printContent = document.getElementById('pagecontent');

                var windowUrl = 'about:blank';
                var uniqueName = new Date();
                var windowName = 'Print' + uniqueName.getTime();

    //  you should add all css refrence for your html. something like.

                var WinPrint= window.open(windowUrl,windowName,'left=300,top=300,right=500,bottom=500,width=1000,height=500');
                WinPrint.document.write('<'+'html'+'><head><link href="cssreference" rel="stylesheet" type="text/css" /></head><'+'body style="background:none !important"'+'>');
                WinPrint.document.write(printContent.innerHTML);

                WinPrint.document.write('<'+'/body'+'><'+'/html'+'>');
                WinPrint.document.close();
                WinPrint.focus();
                WinPrint.print();
                WinPrint.close();
                }

See Demo: http://jsfiddle.net/mu8BG/1/

score 0 · Answer 5 · answered Mar 15 '12 at 16:41

0

You can get the contents of the div by using innerHTML and storing that as a string, then just print or log that piece by itself.

var string_to_print = $('#pagecontent').html();

http://api.jquery.com/html/

answered Mar 15 '12 at 16:41

angelfilm entertainment

1,155
2
15
31

score 0 · Answer 6 · answered Mar 15 '12 at 16:42

0

Using pure javascript you can't, but you can use media print CSS type

answered Mar 15 '12 at 16:42

antyrat

27,479
9
75
76

How to use JavaScript to print the contents on a div?

6 Answers6

Linked