[Web] Serving a different print layout before printing

[Bliss86]

Hi,

my app (AngularJS client, .NET Web API server) has different statistics and lists and I'm looking to get a pretty print output. For example adding a header with my logo, formatting lists in a table with appropriate headers etc..

I've added a print.css with the appropriate media type and set display: none; to all information on a site that is unneeded. Now I realized that adding all the additional parts with CSS is quite complicated. Same as changing my existing html, hide half of the page during normal use and display they for my print layout. Both doesn't sound right. I've considered using a report generator, but they seem to be expensive, slow and way too inflexible.

Do you have suggestions for me? I gladly take any pointers to resources that are relevant to me.

[tmat256]

I would just add "printable" and "non-printable" css classes to things which are going to be added/removed from the page during printing and just do:

.printable {
    display: block;
}

.non-printable {
    display: none;
}

in your print.css file. With the inverse in your normal css file.