Printing content from Div in Vaadin

Question

I want to print contents from Div in vaadin and what I have done is print the innerHTML of the div using script which is shown below:

String script = "var p = document.getElementById('print-area');" +
                            "if(p == null) window.innerHTML.print(); " +
                            "else {" +
                            "    var mywindow = window.open('', 'PRINT', 'height=400,width=600');\n" +
                            "    mywindow.document.write('<html><head><title>' + document.title  + '</title>');\n" +
                            "    mywindow.document.write('</head><body >');\n" +
                            "    mywindow.document.write('<h1>' + document.title  + '</h1>');\n" +
                            "    mywindow.document.write(p.innerHTML);\n" +
                            "    mywindow.document.write('</body></html>');\n" +
                            "    mywindow.document.close(); // necessary for IE >= 10\n" +
                            "    mywindow.focus(); // necessary for IE >= 10*/\n" +
                            "    mywindow.print();\n" +
                            "    mywindow.close();" +
                            "}";

This script prints the contents of the Div but it removes all the css class applied on it. So, is there any better way to do it ?

Or How can I print all the contents of the Div with css applied on it ?

Update:

By using media query taking reference from here:

How to print a Component in Vaadin?

My Code:

Div div = new Div();
div.addClassName("printable");

Print Button:

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

Css

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

It Shows all the css applied to it but gives more space as shown in picture below.

But If I manually decrease the Scale shown in the dialog and set it to 50-75 it seems working.

So, how can it be fixed ?

Does that answer your question: https://stackoverflow.com/questions/65971717/how-to-print-a-component-in-vaadin? — Tarek Oraby, Feb 16 '22 at 06:45
Does this answer your question? [How to print a Component in Vaadin?](https://stackoverflow.com/questions/65971717/how-to-print-a-component-in-vaadin) — Tarek Oraby, Feb 16 '22 at 06:48
If you do not want to print the whole view, I would recommend to create additional route to your application that has the content you want to print and print that view. That way, you get the Vaadin's styles applied. Write separate class that produces the content of the Div so that you can use it in both views. — Tatu Lund, Feb 16 '22 at 07:20
@TarekOraby I have followed exactly same as in your code above. But I get more space in left side so that the whole content moves to the right and could not be occupied in the A4 size. And it works only in the chrome, trying with firefox gives empty page. Is there any way to fix it ? — MilanRegmi, Feb 16 '22 at 11:57
If I set Scale to around 50-75 manually in print dialog it looks fine. But If I scale it up all the contents will be disappeared. — MilanRegmi, Feb 16 '22 at 12:32
Do you have a minimal example that reproduce the issue? It will be easier to debug with some code. — Tarek Oraby, Feb 16 '22 at 16:56
I'm afraid I still don't understand how to replicate the problem. The code just mentions a Div. But what is inside that Div? If I add a simple text inside a div, I don't get any weird alignment issues as described in the question. — Tarek Oraby, Feb 18 '22 at 13:40

Printing content from Div in Vaadin

0 Answers0