Print a specific div

Question

I have a div that contains: text , backround color, image

and i want to print only this div.

I'm kind of clueless so any help could help

thanks.

Have you done any research? And to print? What do you mean? Where? Post some code please... — Jeff B., Nov 10 '12 at 18:49
Possibly this will help you a lot: http://stackoverflow.com/questions/7608110/how-to-print-a-dynamic-div-html-element-using-jquery — Rikki, Nov 10 '12 at 18:51
Duplicate of: http://stackoverflow.com/a/12181825/603003 I have already posted an answer there! — ComFreek, Nov 10 '12 at 18:54
not a difficult topic to research with a little bit of search effort — charlietfl, Nov 10 '12 at 19:29

Levi Botelho · Accepted Answer · 2014-08-22T16:51:47.307

6

You need to define a print stylesheet. You do this in the following manner:

<link rel="stylesheet" href="your url" type="text/css" media="print" />

In that sheet you specify how to display your website for the printed page. So what you can do is set every element to display:none except for the div you wish to print.

You can do this easily with the following selectors:

* {
    display: none;
}

#printDiv {
    display: block;
}

and simply apply the id printDiv to the div you wish to print.

edited Aug 22 '14 at 16:51

answered Nov 10 '12 at 18:53

Levi Botelho

24,626
5
61
96

is it possible to take the div and make it a jpeg? or a gif? – Daerik Fisher Nov 10 '12 at 19:05
Why would you do that? Are you saying is it possible to only print an image (thus an img tag), or do you actually want to serialize your div into an image format? – Levi Botelho Nov 10 '12 at 19:07
i want to serialize your div into an image format – Daerik Fisher Nov 10 '12 at 19:45
If you're printing it anyway why would it need to be an image... – Andy Nov 10 '12 at 19:48
Anything is possible with computers, but the practical answer is a definitive no. I am sure that with a bit of googling however you can find a way to achieve what you wish to achieve with CSS, JS and HTML. Andy does pose a good question. – Levi Botelho Nov 10 '12 at 19:59
for those who are copying and pasting, the link tag has some typo's in it! – andrew.butkus Dec 03 '13 at 13:29
What would those be? I'll correct if you point them out. – Levi Botelho Dec 03 '13 at 14:15

score 3 · Answer 2 · answered Nov 10 '12 at 18:50

What have u tried?

Maybe this helps:

You require to create new style sheet print.css and set CSS media=print

for example :

<style media="screen">
  .noPrint{ display: block; }
  .yesPrint{ display: block !important; }
</style>

<style media="print">
  .noPrint{ display: none; }
  .yesPrint{ display: block !important; }
</style>

Giv the specific div the .yesPrint class and all other the .noPrint.

score 1 · Answer 3 · answered Nov 10 '12 at 19:08

1

I have recently used this JQuery plugin to do something similar

http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/

answered Nov 10 '12 at 19:08

lostsource

21,070
8
66
88

Guys finding this at 2015 or newer, the printElement uses $.browser which is removed from jquery since v1.9 and won't work. – Chaibi Alaa Dec 24 '15 at 01:47

Print a specific div

3 Answers3