CODEWITHSUNDEEP
javascriptjquery
user1215071
user1215071

Reputation: 63

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

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?

Upvotes: 3

Views: 12036

Answers (6)

Jignesh Rajput
Jignesh Rajput

Reputation: 3558

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/

Upvotes: 1

Jasper
Jasper

Reputation: 76003

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/

Upvotes: 2

antyrat
antyrat

Reputation: 27765

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

Upvotes: 0

Marc B
Marc B

Reputation: 360672

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.

Upvotes: 3

angelfilm entertainment
angelfilm entertainment

Reputation: 1163

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/

Upvotes: 0

kappa
kappa

Reputation: 1569

There is the jqprint jquery plugin, take a look

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

Upvotes: 1

Related Questions