by Cedric Dugas on January 3, 2011
Printing is becoming more and more obsolete these days, however most websites still do offer a print stylesheet . Print stylesheets are rarely perfect, when you start disabling some parts of your website you’re bound to forget to disable a div and your layout will probably give you an headache.
Making a site print friendly
There is generally 2 way used for making a website print friendly. Your first option is to use the technique I’ve talked before and make a print stylesheet directly in your website, and you disable everything that is not relevant content.
Generally it becomes rapidly a mess, unfortunately disabling every parts of your website can be tedious, and you are at the mercy of odd IE behaviors because of divs multiplication, css float properties, website updates and others small thing that make the life of a front-end developer miserable for print.
Your second option, and the one I find best suited in most cases, is to create a template with only the page content that you want to print. You add a button on your page and your open in a popup your special print page and call window.print() on page load.
Now call me an idiot, but I never really thought about the fact that window.print could be used to render an iframe instead of a popup. After a quick look on the internet, I found out that I could in fact render iframes from any page (if they are on the same domain of course..).
Introducing a jQuery printing plugin
Now I know there are already plugins to prints parts of your page. That being said the idea behind this plugin is that instead of opening a popup, the plugin creates an iframe and print it directly! This way you save yourself (and your users) the hassle of dealing with a new window.
There are some options available:
url: Overwrite the automatic url fetching in the href attribute
attr: change the default href attribute that is used to retrieve the print page URL.
message: The text message displayed before the print page is loaded
I realize that you don’t always want a print button on your pages, but generally if you don’t need a button it is probably not that important too, and you can still have a print style sheet on your website that get you 90% there. One good example would be a recipe page, where you need a perfect print template and where this technique could be really useful.
Have a look at the demo, it is pretty self-explanatory, hope you guys like it.
** I use a data url background image and some CSS3 properties for the little warning box, you might want to have a look if you care about IE