CODEWITHSUNDEEP
vaadin
Technical 101
Technical 101

Reputation: 158

How to print a Component in Vaadin?

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?

Upvotes: 2

Views: 341

Answers (1)

Tarek Oraby
Tarek Oraby

Reputation: 1219

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.

Upvotes: 3

Related Questions