How to print div content and css associated using Jquery or PHp

Question

i have a page like:

My page

and i need to print to pdf ( or physical printer directly ) the content of yellow div. I need to print the div like you see.. with css style too.. how can i do it? i see in other post that they print only text content..

Can someone help me?

See http://stackoverflow.com/questions/468881/print-div-id-printarea-div-only, this will help you. — Tim, Jun 22 '12 at 08:26
http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div — Tats_innit, Jun 22 '12 at 08:28

score 3 · Accepted Answer · answered Jun 22 '12 at 08:55

3

You can assign different CSS properies for different device types. For example:

<style type="text/css">
/* all devices */
@media all
{
  #content { display:block;}
}

/* printer specific CSS */
@media print
{
  #content { display:none;}
  #content div#yellow { display:block;}
}
</style>

To print a page you can use javascript window.print() method:

<form>
<input type="button" value="Print this page" onClick="window.print()">
</form>

answered Jun 22 '12 at 08:55

Minras

4,136
4
18
18

then? how can i print content? – Jayyrus Jun 22 '12 at 08:56
Updated the reply. Javascript `window.print()` will do the job. – Minras Jun 22 '12 at 08:59

score 3 · Answer 2 · answered Aug 15 '13 at 09:44

Use the following code:

<script type="text/javascript">
        function CallPrint(strid) {
            var prtContent = document.getElementById(strid);
            var WinPrint = window.open('', '', 'letf=0,top=0,width=400,height=400,toolbar=0,scrollbars=0,status=0');
            WinPrint.document.write(prtContent.innerHTML);
            WinPrint.document.close();
            WinPrint.focus();
            WinPrint.print();
            WinPrint.close();
        }
     </script>


<a href="#" onclick="javascript:CallPrint('divID')">Print</a>

How to print div content and css associated using Jquery or PHp

2 Answers2