Here is an example, to print content of a particular div without opening it in a separate window. I have used few techniques with CSS style to define which content should be available to print and which should not. So you can find out in the code below that I have used @media print { } to define the styles for print media and @media screen { } to define the styles for screen media.
I have used dojo's clone method to copy the content from the div inside the main block and append it to the printable div. Thus you can print content in a particular div. Also you can develop it further by adding different contents from different locations in a page, avoiding certain elements like button, to print.
Remember to import NodeList-manipulate module for clone() method to work. Also I have used behavior to define onclick properties of the Print buttons. So you need to import behavior modules of dojo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Print Function</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js.uncompressed.js'></script>
<script type="text/javascript">
dojo.require("dojo.NodeList-manipulate");
dojo.require("dojo.behavior");
dojo.ready(function(){
//Use any of the method to initiate behaviour properties for print button
//Method: 1
/*var printInitiate = ({
".printBtn":{
onclick: function(evt){
dojo.query("#content").clone().appendTo(".printer");
window.print();
}
}
});
dojo.behavior.add(printInitiate);*/
//Method: 2
dojo.behavior.add({
".printBtn":{
onclick: function(evt){
dojo.query("#content").clone().appendTo(".printer");
window.print();
}
}
});
dojo.behavior.apply();
});
</script>
<style type="text/css">
@media print {
div.main {
display:none; /*Code makes the entire content of the main div unavailable to print */
}
div.printer {
display:block; /*Code makes the printer div available to print */
}
}
@media screen {
div.main {
display:block; /*Code makes the entire content of the main div available to screen */
}
.printer {
display:none; /*Code makes the printer div unavailable to screen */
}
}
</style>
</head>
<body>
<div class="main">
<p>This content not required to print. The entire content is inside a main div. I have used a div declared as display: none, outside of the main div.</p>
<p>I have used css style to make it available to the print media and not available to the screen media.</p>
<p>On click of the print button on screen the contents within the div with id=content, will be cloned to the div outside of the main div making it available to the print media</p>
<input type="button" value="Print" class="printBtn" />
<p>############# Printable Content ##################</p>
<div id="content">
<p>First Line</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
<p>Second Line</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
</div>
<p>############# Printable Content End ##################</p>
<input type="button" value="Print" class="printBtn" />
<div>The content is below and not required to Print.</div>
<p> Remember to make the entire content within the main div unavailable to the print media.</p>
</div>
<div class="printer"></div>
</body>
</html>
