A 'Print This Article' Link
For some websites, it would be nice to let people print the content of a web page on your website. Just the article; no header, navigation, or ads.
Setting it up is feasible with CSS @media print and @media screen rules. But the details can be onerous.
Instead, that work can be avoided with an alternative: Provide a "print this article" link that utilizes a PHP script to copy the article into an otherwise blank page so it is available to print.
This article describes how.
But there is a caveat. The content to be printed needs to be in the web page source code between HTML article tags. If the page has no article tags, then the entire web page will print, which includes the header, navigation, etc.
Additional information about the article tag can be found at The HTML article Element of the willmaster.com website and at
The Article Contents Element of the developer.mozilla.org website.
After the link is clicked and the PHP script kicks in, the content is published on a separately generated printable page and the printer dialog is launched (the person has to allow the printing to proceed). When printed, the person closes the printable page.
Installation is relatively simple.
The source code for the "print this article" PHP script is copy and paste — no customization required. Once that is installed on your server, web pages can be "print this article" enabled with, as mentioned, one line of JavaScript and a "print this article" link.
Let's start with the PHP script. As noted above, it is copy and paste.
Below is the source code. Save it as PagePrinter.php or other *.php file name. Upload it to your server and make a note of its URL.
<?php
if( ! isset($_GET['p']) ) { exit; }
$page = file_get_contents($_GET['p']);
$page = preg_replace('!^.*?<article[^>]*>!si','',$page);
$page = preg_replace('!</article>.*?<article[^>]*>!si',"\r\n\r\n",$page);
$page = preg_replace('!</article>.*$!si','',$page);
$page = preg_replace('!<aside[^>]*>.*?</aside>!si','',$page);
echo <<<PAGE
<!doctype html>
<html>
<head>
<title>For Printing</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body { font-size:100%; font-family:sans-serif; }
img { max-width:100%; }
</style>
</head>
<body>
$page
</body>
</html>
PAGE;
?>
<script type="text/javascript">
print();
</script>
The PagePrinter.php script:
- Receives the URL of a web page to print.
- Grabs the page at the URL.
- Removes everything except what is between HTML
articletags (unless there are noarticletags). - Removes everything between HTML
asidetags, if present. - Tells the browser to print.
When PagePrinter.php is ready on your server, then you are ready to set up your web pages for printing.
There are two steps.
Step 1.
Place this JavaScript on your web page. Anywhere on the web page is okay; immediately above the cancel </body> is a common place for JavaScript.
<script type="text/javascript">
function PrintThisPage() { window.open("https://example.com/PagePrinter.php?p="+encodeURIComponent(document.URL),"printme","popup"); }
</script>
Replace https://example.com/PagePrinter.php with the URL to your installation of the PagePrinter.php script.
Step 2.
Put this link into your web page.
<a href="javascript:PrintThisPage()">Print this article</a>
Optionally, the link text may be modified. The link value needs to remain as is.
If you wish to remove the "Print this article" link when the page prints, put the above link between HTML aside tags. Example:
<aside> <a href="javascript:PrintThisPage()">Print this article</a> </aside>
You now have a "print this article" link on your web page. Tap it and see how it works. If the browser allows popups, the printable page should be in a popup. Otherwise, the printable page will be in a separate browser tab.
To put a print link on other web pages, follow the 2 steps above for each web page.
(This content first appeared in Possibilities newsletter.)
Will Bontrager
