Print Div

Print Div

  Print div / Print div Content / Print content in div without opening new window    

 Javascript window.print() method

   There is method available in javascript which useful when we want to print the contents of the web page. Simply calling the window.print() method in javascript will invoke the operating systems print dialog from where you can print the contents of the web page

<button onclick="window.print()">PRINT PAGE</button>


The print button on my HTML page. When clicked on this button it calls window.print() and shows the print dialog

 Simple isn’t it?

But wait we have problem here… The window.print() printed my webpage but it didn’t print the contents hidden inside the Blue container (Show with scrollbar). This is the default behavior of the window.print(), it will not print the contents within controls having scrolls. So what do we do? Well not to worry J there is always some workaround. Print section page (iframe, span, textare, div) is also possible using below solution

So here is the solution ….

Using hidden <div>Print a div

·         Keep a hidden <div> with overflow:visible on the page, just next to the scrolling container

·         Only while printing, copy all contents of scrolling container into div

·         Hide the original scrolling container

·         Make printing <div> visible

·         After printing is done hide the <div>, make original scrolling container visible again.

·         And yes all this will happen without the user even knowing! Smart huh!


HTML CODE


<h1> Document Header</h1>     

<div id="LargeScrollingContent" class="ScrollingContent" style="overflow:auto; width:600px; height:300px; border:solid 1px blue">   

<b> <h2>TEXT STARTS HERE...</h2> </b>   

1.Test text Test text Test text Test text Test text Test text Test text    2.Test text Test text Test text Test text Test text Test text Test text    3.Test text Test text Test text Test text Test text Test text Test text    4.Test text Test text Test text Test text Test text Test text Test text    5.Test text Test text Test text Test text Test text Test text Test text    6.Test text Test text Test text Test text Test text Test text Test text    7.Test text Test text Test text Test text Test text Test text Test text    8.Test text Test text Test text Test text Test text Test text Test text    9.Test text Test text Test text Test text Test text Test text Test text    10.Test text Test text Test text Test text Test text Test text Test text    11.Test text Test text Test text Test text Test text Test text Test text    12.Test text Test text Test text Test text Test text Test text Test text    13.Test text Test text Test text Test text Test text Test text Test text    14.Test text Test text Test text Test text Test text Test text Test text    15.Test text Test text Test text Test text Test text Test text Test text    16.Test text Test text Test text Test text Test text Test text Test text    17.Test text Test text Test text Test text Test text Test text Test text    18.Test text Test text Test text Test text Test text Test text Test text    19.Test text Test text Test text Test text Test text Test text Test text    20.Test text Test text Test text Test text Test text Test text Test text    <b> <h2>TEXT ENDS HERE....</h2> </b>    </div>  

<div id="printingDIV" class="PrintingContent" style="height:100%; width:100%; display:none; overflow:visible"></div>

   

<button onclick="PrintPage();">PRINT PAGE</button>

 JAVSCRIPT        

function PrintPage()  

{
           

   var scrollingContainer = document.getElementById("LargeScrollingContent");           

   var printContainer = document.getElementById("printingDIV");           

   printContainer.style.display = "block";                       

// Copy all contents into print conatainer           

   printContainer.innerHTML = scrollingContainer.innerHTML;           

   window.print();             

// Hide again           

   printContainer.style.display = "none";        

}



STYLE


<style> 

@media print

{   

.ScrollingContent    {  display:none;  }   

}

 

</style>



  So below is how my printed page will look like (Showing all contents within the scrolling container). Im happy now J

 




If you only only need to print contents of the div then you can also try to Jquery code which is available

$("LargeScrollingContent").printElement();
			In this case there is no need to have a hidden printing div as we only need to print content of the the defined div nad not the whole web page 		
	

 

Tags:

Div scroll scrollbar div div with scrollbar scrollbar in divHow To Hide Div On Click Using JQueryFixed div and floating divJQuery Get .next() ElementJQuery Collapsible DivJQuery add/remove Class DynamicallyJQuery Change Div background Color and Text Color On ClickJQuery Animate Div Height and WidthHow to call function in JQueryJquery hide show div exampleJQuery On Click Change Div Content

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.