Print a Part of Page using Javascript
do you want to print a part of the web page?
do you have multiple print buttons in a web page, which prints portion of the page?
do you want to exclude some elements in print of your page? (like images, ads)
do you want to print the display page differently? (changing font or colors of text)
Here, I am going to give code examples to above questions
Let us take a sample HTML web page
<html>
<body>
<div id="header">Header Content</div>
<div id="content">actual content</div>
<div id="footer">Footer content</div>
<input type="button" value="Print" onclick="printPage();"></input>
</body>
</html>if you want to print the whole page then
<script language="javascript">
function printPage() {
window.print();
}
</script>To Print a part of the web page:
– create a print window and write html text you wanted to print
– focus the window and call the “print()” function
– close the print window
Here is the modified printPage function
<input type="button" value="Print" onclick="printPage('content');"></input>
function printPage(id)
{
var html="<html>";
html+= document.getElementById(id).innerHTML;
html+="</html>";
var printWin = window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status =0');
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}You can hide some of the elements within your actual content by adding style elements or include css file in print window html
-----
<div id="content">
<div class="ads"> Ad content</div>
actual content
<img src="example.gif" />
</div>
----
function printPage(id)
{
var html="<html>";
html+="<head>";
html+="<style type='text/css'>#content div.ads, #content img {display:none}</style>";
html+="<link rel='Stylesheet' type='text/css' href='css/print.css' media='print' />";
html+="</head>";
html+= document.getElementById(id).innerHTML;
html+="</html>";
.....
}
In the above example, I have added style and css file, you can use either one or both. Using these styles or css, we can style the text only for print.
If you have multiple print buttons, and each one prints selected area of a web page, then you need to pass id of the print area on each button click.
<div id="area1">Area1 content</div>
<input type="button" value="Print" onclick="printPage('area1');"></input>
<div id="area2">Area2 content</div>
<input type="button" value="Print" onclick="printPage('area2');"></input>
Javascript Code to Scrolling Page Title
How to Refresh/Reload Page or Part of the Page Automatically
Create Interactive Charts with Google Chart API
About Author
Nice one;-)
I was looking for partial printing for hours.
I’ll try “Print a part of the web page:” in different browsers and if it works fine with 9-fbrowser I’ll write back. Thank you very very much for the light in end of the tunnel.
Thank you very much. It works great with all browsers I need (tested on ie7,8,9 ff3.6.23,ff7,safari5(win)). Opera unfortunately doesn’t print thinking new window is totally the same with current (I’ll try to make it later)
Thank you one more time very much.
Thanks for tested in different browsers and notifying me Vosmer.
This method works wonderfully even in Joomla! I didn’t think it would but it did. Now my question is, how can I control the styles of the printed page? Again, I’m using Joomla 2.5.
If I can control the styling of a Joomla article that I want to print only a “portion of” this method is a sure fire grand slam winner!!!!!
Standing by…
Respectfully,
LMW1
This method works fine, but i want the contents to be printed on same page not in opening new page
This is a really great and very simple method, Thank you very much
this function is great, but I need something that will print the background as well.
excelent… how to print without a dialog box??
Thanks for the simple and efficient solution.
Only question i have now is how to open the new window in full screen mode and how to open print window in the same page?
Thanks
Using IFrame instead of Window.
I have used the window.open tip to print partial portions of HTML, but the one issue that I have encountered is that often I get popups that get blocked by the page, resulting in less than user friendly functionaly. Some research indicates that popups should not occur when the action happens direcly in user trigger event, such as onclick, but if it is embedded in another function that is called later, it may behave differently. What I have encountered first hand is when using ajax I get the popup blocker. For example, user clicks a button; javascript gets some info from the server using ajax; upon successful receipt, open a new window to print the results. I assuming that because the window.open action gets triggered from the new thread that ajax creates, the browser does not know it came from a user driven event and I get the popup.
The solution I found and has worked well so far: Use IFrames instead of windows.
Here is the code:
var htmlCode “some html code”;
var frame = document.createElement(“IFRAME”);
frame.width = 0;
frame.height = 0;
document.body.appendChild(frame);
frame.contentWindow.document.write(htmlCode);
frame.contentWindow.document.close();
frame.contentWindow.focus();
frame.contentWindow.print();
document.body.removeChild(frame);
This works well to avoid popups. I have not tested for cross-browsers because I mainly work developing web applications for intranets, so this works well for internet explorer, but the logic of the code should work well for any browser (just adjust the browser specific lingo as needed).
Code Explained:
//String that contains the html code.
var htmlCode “some html code”;
//Create an IFrame object and store its reference in the var frame.
var frame = document.createElement(“IFRAME”);
//Set the width and heigh of the frame to 0 so it does not display in the page. Note that using CSS’s display:none will not work because it won’t print.
frame.width = 0;
frame.height = 0;
//Add the frame to the web page.
document.body.appendChild(frame);
//Add the html code to the frame’s window’s document body. Note that because we don’t specify a source for the IFrame, we can modify its document content just like we do with window.open (same concept).
frame.contentWindow.document.write(htmlCode);
frame.contentWindow.document.close();
//Focus on the frame’s window and print it.
frame.contentWindow.focus();
frame.contentWindow.print();
//Remove the frame from the web page as it is no longer used. This is important to keep the webpage clean from unecessary (and invisible) tags.
document.body.removeChild(frame);
If you want to make this code more reusable, put the code in a function and use the html as parameter. Example:
var htmlCode “some html code”;
printHtmlCode(htmlCode);
function printHtmlCode(htmlCode)
{
var frame = document.createElement(“IFRAME”);
frame.width = 0;
frame.height = 0;
document.body.appendChild(frame);
frame.contentWindow.document.write(htmlCode);
frame.contentWindow.document.close();
frame.contentWindow.focus();
frame.contentWindow.print();
document.body.removeChild(frame);
}
Now you can print partial html code by simply calling:
printHtmlCode(htmlCode);
I hope this works for others like it has worked for me.
Farid E. Galindo
Software Engineering -|- Business Systems Analyst
Work perfectly in IE and firefox…Thanks
Thank you. you save me!!
Part of a page is printing but without my images that is from images directory in public folder