How to print a Component in Vaadin?

Question

I have been struggling for sometime now, trying to find ways to print out/generate document using vaadin. i have tried using the below code but this prints all the components. I wanted to print only a particular form or layout.

UI.getCurrent().getElement().executeJs("print();")

Can some one guide me?

What version? v8 has functions to write out the HTM e..g – cfrick Jan 30 '21 at 18:49 — cfrick, Jan 30 '21 at 18:49

score 3 · Answer 1 · answered Feb 01 '21 at 06:12

You'll need some CSS (similar to the approach mentioned here) that will hide everything when printing is invoked, except for the Layout or Component that needs to be printed.

For example, assuming you have the following two DIVs in your view:

Div printable = new Div(new Span("printable"));
Div nonPrintable = new Div(new Span("nonPrintable"));

You can give one of those a classname:

printable.addClassName("printable");

Then, you would add the following CSS to the global scope:

@media print {
  body, body * {
    visibility: hidden;
  }
  .printable, .printable * {
    visibility: visible;
  }
  .printable {
    position: absolute;
    left: 0;
    top: 0;
  }
}

Note, in a Vaadin 14 project, the previous CSS is most easily incorporated using the @CssImport annotation. For example, the following annotations can be added to one of your Java classes:

@CssImport("./shared-styles.css")

Then under the directory {projecr-root-directory}/frontend, you'd need to create shared-styles.css and place the aforementioned styling there.

How to print a Component in Vaadin?

1 Answers1

Linked