How to Print Only One Thing on a Web Page
Site visitors may wish to print one special thing on your web page, without printing the entire page. The functionality can be provided by publishing that particular item in an iframe with a "print" button or link.
The item to print might be:
-
A poem.
-
A meeting location and times schedule.
-
The current lunch special.
-
"Employee of the Week" image and caption.
-
A map.
-
An ad with a list of products or gift ideas people might want to ask others about.
-
An ingredient list.
Note: If your requirement is to make an entire web page printer-friendly, the A Printer-Friendly Web Page with Non-Printing Elements article describes how to do that.
To enable printing only a section of the web page, read on.
Live Demonstration
The demonstration is a recipe for my childhood. Click the "Print Recipe" button to print the recipe.
The demonstration has a border so you can visualize what section will print when you click the button. Your implementation isn't required to have a border.
Only the iframe content prints — not the rest of the page.
How It Works
The content in the iframe has JavaScript and a print button.
The print button itself could have JavaScript to print the page, with no other JavaScript needed. However, I wanted to remove the print button while the page is being printed. Some additional JavaScript does that.
If the iframe you implement has no borders, it can appear seamless with the rest of the page. Yet, be printed separately.
Source Code & Implementation
Implementation is two steps:
-
Create a separate web page, the iframe page, for the content that will be pulled into the iframe tag.
-
Put an iframe tag into the public web page where the iframe page is to be published and, optionally, printed from.
Step 1:
Here is source code for a basic iframe page that can include your content. Notes follow.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Example "Print Part of Page" Iframe Content</title>
<style type="text/css">
body { margin:0px; font-family:sans-serif; }
</style>
</head>
<body>
[YOUR IFRAME CONTENT HERE]
<div style="display:table; margin:.25in auto 0 auto;">
<input id="print-screen-button" type="button" value="Print This" onclick="PrintTheContent()">
</div>
<script>
function PrintTheContent()
{
document.getElementById("print-screen-button").style.display = "none";
print();
setTimeout(DisplayTheButton,1500);
}
function DisplayTheButton() { document.getElementById("print-screen-button").style.display = "block"; }
</script>
</body>
</html>
In the above source code, replace [YOUR IFRAME CONTENT HERE] with your content. What you put here is to be printed when site visitors click the print button.
Below the [YOUR IFRAME CONTENT HERE] is the print button and some JavaScript.
The code for print button is colored red. Change the text on the button according to your preference.
The additional JavaScript is colored blue. No customization is needed.
Step 2:
Here's the code for an iframe tag.
<iframe
src="http://example.com/page.php"
style="width:300px; height:300px; border:none; overflow:auto;">
</iframe>
Put the iframe tag into the public web page where the printable page will be published, the iframe page you created in the first step.
Replace http://example.com/page.php with the URL to the iframe page you created.
The iframe tag's CSS style can be changed to accommodate your iframe size and other styling requirements.
Implementation is complete, except for testing to verify it works as it should.
Click the print button. The content in the iframe prints, but not the print button or the rest of the page.
(This article first appeared in Possibilities ezine.)
Will Bontrager
