You have put a lot of effort into creating a sexy overview of whatever data your application stores and allow your users to manipulate that data through AJAX controls. But, some people just want to print their data.
How to go about that? Just printing the page with data is generally not a good idea because it has been optimized for display on a screen. The first step we need to take is adapting our page for printing. Stylesheets are very handy tools for this. Check the following part of the header of my layout:
stylesheet_link_tag('default', :media => :screen) stylesheet_link_tag('print', :media => :print)
This will generate HTML code that includes two stylesheets. However, only the ‘default’ stylesheet is used on screen. When the users prints a particular page, the print stylesheet is used instead. So, what do you want to change in the print stylesheet?
- Fonts should be serif (not sans-serif) for printing
- Hide images as much as possible
- Hide ads
- Display printable ads that are hidden on screen
- Hide navigational elements
- Use a black-on-white colour scheme
- Underline links and colour them blue for easy recognition
- Add the actual URL to your links (see below)
To add the actual URL in the href-part of your link to the name of your link add the following to you print stylesheet:
a:after { content:' [' attr(href) '] '}
Now, with all this in place, load your page with data. Print your page or watch a preview and be amazed at what stylesheets can do for you!
The final touch is adding a “Print this page” link to your navigation on screen. Here you can use link_to_function:
link_to_function("Print this Page", "javascript:print()")
That’s it. Just hit the Print this Page button and your browsers print dialog will pop up and use your fancy new print stylesheet.
Excellent guide!!
[...] feature that is quite high on the priority list is to be able to print Things. I found the article “Print this page” with Ruby on Rails but I wanted a separate page for printing Things. I have created a layout called [...]
this is great.. When i tried this, the whole bondpaper was utilized.. do you have any way to adjust the layout during printing?
@josh: you can change the way you page looks on paper by editing the print.css file.
This is a great tip… thanks.
However, I’ve got a black background, and have generated (using Gruff) matching graphs in white-on-black. It looks pretty strange having white-on-black graphs when the rest of the page is black-on-white.
Any for suggestions for how to get the page that’s printed from the javascript:print() command to be re-rendered (say, passing a parameter to say “switch color-scheme for graphs)?
Sorry… I should add that I’ve set up print.css so that it correctly swaps the foreground/background.
@David: I’m afraid you can’t change image colours with CSS. You could, however, create a normal (white on black) and printable (black on white) image.
With CSS you then hide the printable version on screen and you hide the screen version in print.css. This way you can easily prin the graph too. But, you’ll have to generate two graphs.
Wonderful post–many thanks. I had a problem making my “print this page” link on the screen disappear from the printed page. Even though I had this in my stylesheet (my background color is White)
a{ text-decoration:none; color: White; background-color: White; }
a:hover { color: White; }
It was still appearing in the printed documents. I suspect this is a bug/feature of my OS.
So I just set the font size to 0%
a{ text-decoration:none; color: White; background-color: White; font-size: 0%; }
a:hover { color: White; font-size: 0%; }
And they magically disappear. I leave this as a hack for anyone reading this excellent post.