How to have multiple css print layouts on a single page application?

Question

I have a single page application, and I have different sections where I want to print out list of images each on it's own page.

I thought maybe to use iframe for this purpose, but I wanted to have an answer from someone experienced with this situation.

What is the best way to approach this problem?

Answer 1

You can use CSS media queries to direct CSS rules at print time as described in this answer: How do I hide an element when printing a web page?.

You can then set different classes on some high level part object before printing to control which CSS rules apply and thus what gets printed in a given operation.

You can also have a whole stylesheet withe the media type set to print so it applies only when printing.

Or, depending upon the specific situation, you can open a new window, put the content to be printed in that new window and print that window. Usually, it's better to avoid opening a new window if you don't have to.

Answer 2

There is a CSS Template Module in the works and there is a Javascript implementation while browsers catch up.

I've had fairly good results with it.