PrintView with Vaadin Page

General
1

Hi,

i have a use case where users print Views via Ctrl + P (native Browser function). The page does not fit on the page, can anyone tell me where i should have an eye on to get the page printable?

(Another solution would be adding a printer icon and generate a PDF, but thats not what they are used to do)

2

Does your page adapt to different browser widths?
If so I assume it should also adapt to the printer page.

I haven’t printed anything in years, but trying it out now, it looks like our app adapts reasonably well. There are some elements that we should perhaps remove, but that is what @media print {...} in your css is for.

You probably need to chose “Fit to page width” somewhere in the print dialog

Actually, I see that since our pages are setSizeFull, the print fits nicely in the width, but will always be clipped in the height. There will never be a page 2…

Here is how my print preview looks for a random page

image
image1697Ă—1205 155 KB

1 Like
3

Printing UI as is very seldomly works well. Screen and paper are so different mediums. E.g. interactive components do not work on paper, neither do screenfriendly colors. It depends what your actual need for printing the view is, but if it is anywhere near some sort of report generation, then you should consider a different approach.

  • Use some 3rd party report generation library, that can export the report as PDF. These libraries are usually opinion based and you may or may not like their style.
  • Create dedicated views for printing as different routes and use headless browser to process them to PDF. Use different theme variant here that leave background white, use colors conservatively, do not use interactive components, readonly mode, setup paging. Benefit of this is that you can use web components and other advanced HTML.
  • Use some 3rd party HTML to PDF conversion library. This would require that your HTML is native only, these usually do not support web components, so Vaadin components cannot be used. But you can leverage from Jsoup and other libraries in processing that HTML. This allows more degree of freedom than actual report generation library. But if your design is complex, it can be rather tedious to achieve. In case of simple reports this works just fine.