Print using Javascript?

Question

I have particular division in my web page. i want to print that div only when click "print" in my web page. i have some javascript code. But that is not well formatted.

Is there any javascript to print particular division from my web page?

Thanks in advance

Gnaniyar Zubair

Do you mind marking this 'Answered'?

Andy
– Andy

2009-07-22 18:34:52 +00:00
Commented Jul 22, 2009 at 18:34 — Andy
– Andy, Commented Jul 22, 2009 at 18:34

Andy · Accepted Answer · 2009-04-19 07:23:49Z

9

You can specify CSS stylesheets with the attribute media="print" and apply the style display: none; to all elements except those which you want printed.

For example:

print.css

* { display: none; }
div.print_block { display: block; }

page.html

<HEAD>
<LINK rel="stylesheet" type="text/css" 
     media="print" href="print.css" />
</HEAD>

<DIV class="print_block">
   ...
</DIV>

edited Apr 19, 2009 at 7:23

answered Apr 19, 2009 at 7:01

Andy

12.2k5 gold badges34 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gnaniyar Zubair Over a year ago

thanks andy... then in print button onclick i have to give onclick='window.print()'. then it will print only that div. right?

bobince Over a year ago

Yes, though the JavaScript isn't really relevant; the same will happen when the user goes to File->Print themselves.

Andy Over a year ago

Yep. It applies the media="print" styles. You can test this without printing by changing the tag to media="screen" instead (making sure it's the last style sheet referenced.

NickZoic · Accepted Answer · 2009-04-19 07:27:58Z

5

If you want to hide some divs when printing, you can set them to "display: none" in a print media section of your stylesheet, and they won't appear.

eg, in your stylesheet:

 @media print {

    div.header {
        display: none;
    }

    div.printable {
        page-break-inside: avoid;
        page-break-after: always;
    }
 }

This answer is almost exactly the same as the two which beat me by 4 minutes :-) , just a note that you don't need a whole separate stylesheet if you don't want to ...

Also, the "page-break-inside: avoid;" and "page-break-after: always;" clauses are good for printing out a few divs, each on its own page.

edited Apr 19, 2009 at 7:27

answered Apr 19, 2009 at 7:05

NickZoic

7,8653 gold badges27 silver badges19 bronze badges

Comments

tanathos · Accepted Answer · 2009-05-13 11:07:23Z

3

Check this jQuery plugin jqPrint. It seems to do what you want.

answered May 13, 2009 at 11:07

tanathos

5,6164 gold badges36 silver badges49 bronze badges

Comments

dirkgently · Accepted Answer · 2009-04-19 07:01:04Z

1

I don't think there is a direct way of doing this. You can however:

Create a special CSS for media=print where all but the one div you want to print is hidden, OR
Use a hidden iframe for the content you want to print

Googling with the terms "javascript print partial page" may help you find some tutorials.

answered Apr 19, 2009 at 7:01

dirkgently

112k16 gold badges135 silver badges190 bronze badges

2 Comments

Steve Harrison Over a year ago

CSS would be the better option.

dirkgently Over a year ago

Sure, but I have seen pages use iframes as well, mentioned it for the sake of completeness.

lfx · Accepted Answer · 2009-04-19 07:45:40Z

0

I saw smf like that in one project at my job. You have to open popup in popup you put content from parent page which you wanna to print. And it's all :)

answered Apr 19, 2009 at 7:45

lfx

1,39113 silver badges24 bronze badges

Collectives™ on Stack Overflow

Print using Javascript?

5 Answers 5

3 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related