What you see is what you print (WYSIWYP)

Some decades ago, there have been a lot of thoughts concerning a paperless office and maybe the end of the printer.

The present looks quite different. Everybody needs (wants) a print button, to hardcopy the visible part of the browser.

From a UI5 framework perspective, everything is designed to be responsive in multiple devices, but what about print devices? Inside css, there is a special @media print directive, to control print/device specific output, but this does not offer an out-of-the-box print approach.

UI5 Print Demo

Now let us come to the interessting part...

It took me some time to figure out, what is the most valueable way of handling print requests from inside the browser. In my oldschool solutions, there always have been a separate print stylesheet, but today, this is widely done using a special css @media directive. This also reduces the number of needed http requests (UI5 needs a lot of that ;-).

In my former Sencha framework, i opened a new print preview window, wrote some optimized data to that window and called window.print().

Today, UI5 itself is optimized for responsive design and print is a special kind of device/media type. I wanna have the visual design, but optimized for printing and i wanna be able to print a view or a dedicated area. The problem is, that UI5 is a single page app the contains all visible and invisible information in one DOM node.

To get the best of both worlds, i found a tricky solution to print exactly what i need, but supporting the base theme and my custom css extensions.

The solution in detail:



I know, that the example have to be extended on your special needs, but i think, it is a nice starting point.

Update:
Some people have been iritated, that the collapsed panel content will be printed! This is a feature by design (special rule inside css style) to auto expand hidden panel content. On our order confirmation i generally collapse ordered items, but i think on print, you (i) generally will print all contained information. All the needed print media are comment, so this behavior can easily be excluded.
In this case, call it "What you see is less than what you print".