Printing prints only first page

General
1

Hi there,

i’ve got a problem with printing a Vaadin page. I open my printpage in a seperate window. All data is displayed in this window. But if I try to print the page, my printer throws out only the first page. There are more data than that on the page and it gets lost.

Any clues ?
Thanks!

2

How do you print? What are you trying to print?
You need to give more information then that so that someone can help you.

3

I tried the print(); - Method from javascript and the STRG+P from my Browser. (Should do the same)

Dialog call:


PrintUI.registerPanel(printLayout); // is an VerticalLayout with all the data
BrowserWindowOpener opener = new BrowserWindowOpener(PrintUI.class);
opener.setFeatures("height=200,width=400,resizable");
opener.setWindowName("print");
// A button to open the printer-friendly page.
opener.extend(btnPrint);

UI from the Dialog:


public static class PrintUI extends UI {

		private static final long serialVersionUID = -5356024154353367380L;
		private static VerticalLayout myPrintView = new VerticalLayout();

		public static void registerPanel(VerticalLayout printView) {
			myPrintView = printView;
		}

		@Override
		protected void init(VaadinRequest request) {

			this.setSizeFull();
			setContent(myPrintView);

			JavaScript.getCurrent().execute(
			 "setTimeout(function() {"
			 + "  print(); self.close();}, 0);");
		}

	}

If I comment the js part all data is shown in the new window.

Some code of the initUI from the printLayout(extends VerticalLayout).
This is only to show how I put together the VerticalLayout, so you see I use the CustomLayout with an HTML-Page.


// Create custom layout from "layoutname.html" template.
		InputStream layoutFile = getClass().getResourceAsStream(
				HelperStrings.htmlFilePath + myLayoutFile);

		try {
			CustomLayout custom = new CustomLayout(layoutFile);
			custom.addStyleName(myStyleName);

			// Use it as the layout of the Panel.
			this.addComponent(custom);

			String title = "TITLE"
			Label lbltitle = new Label(HelperStrings.setH3Label(title),
					ContentMode.HTML);
			lbltitle.setSizeUndefined();
			custom.addComponent(lbltitle, "PositionOfTitle");

...

If more information needed I will provide it :wink:

4

The issue is that Vaadin scrolling uses a DOM structure that browsers printing mechanisms can’t natively comprehend; the scrolling is a culprit here. Browsers do what we tell them to, so a 100% high UI is one page high on the screen, and in print. Set the UIs height to undefined, same with the layout inside; that should fix your issue by allowing the browser to scroll the whole DOM, instead of Vaadin scrolling the panel content.

5

Thanks Thomas, i tried to set all sizes to undefined but it didn’t work.

In my layout and in my UI is no such word like setSizeFull() anymore. (searched)
I set the size to undefined.

I see the difference on the screen. But Vaadin still takes the control of the scrolling. I recognized it because the down button of the scrollbar doesn’t work if Vaadin takes control of the scrollbar.
Is it possible that the use of customLayout interferes with this?

Can I see in the HTML if Vaadin takes the scroll control? Perhaps I can see with firebug where the bad element is.

6

I looked with firebug and found:


<body class=" v-generated-body v-ff v-ff3 v-ff36 v-gecko v-lin" scroll="auto">
    <div id="appName-341681252" class=" v-app myStyleName">
        <div class="v-ui v-scrollable" tabindex="1" style="">
           .... Content .....
        </div>
    </div>

So it is the UI - Element ? But I can not see why …

7

Printing Vaadin apps is a complex matter, and usually you have to resort to producing pure HTML for the browser to print. Including any Vaadin layouting in the printed frame usually doesn’t produce the results you want. I hoped that the fix I gave would’ve worked, but apparently it didn’t. Next up, try HTML.

8

Hi,
Christian Wahl do you found a solution?

9

I need a solution too!

10

I post a workaround here

https://vaadin.com/forum/#!/thread/8147801/9070632

11

I have the save problems, and my workaround is:

private void setSizeUndefined2Print() { com.vaadin.ui.JavaScript.getCurrent().execute("document.body.style.overflow = \"auto\";" + "document.body.style.height = \"auto\""); UI.getCurrent().setSizeUndefined(); this.setSizeUndefined(); } if for some cases you need to switch back to “defined” size, next function can be used:

    private void setSizeFull2Print()
    {
        com.vaadin.ui.JavaScript.getCurrent().execute("document.body.style.overflow = \"\";" +
                                                      "document.body.style.height  = \"\"");
        UI.getCurrent().setSizeFull();
        this.setSizeFull();
    }