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

Question

i have a page like:

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?

Solution 1

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>

Solution 2

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>