Search code examples
itextvaadinitext7

How convert vaadin 23 element to itext 7 element?

I have leaflet map in my Vaadin site:

enter image description here

I need export this DIV block (as a picture) into PDF file (i use iText 7 https://kb.itextpdf.com/home):

Here I found the information * https://kb.itextpdf.com/home/it7kb/ebooks/itext-7-converting-html-to-pdf-with-pdfhtml/chapter-1-hello-html-to-pdf*

about export HTML to PDF file.

I have problem:

iText 7 need IElement, but I have only vaadin element.

Please tell me how to convert vaadin element to iText element?

I try get OuterHTML from vaadin element:

        String HTML = this.getElement().getOuterHTML();  
        var elements = HtmlConverter.convertToElements(HTML);
        for (IElement element : elements) {
            pdfExporter.getDocument().add((IBlockElement)element);
        }

As a result , I received report without graphics

enter image description here

Solution

  • The Element API in Vaadin does not hold everything on the server-side memory. You should think of it more as a proxy that just communicates what is necessary to the client side and back. What the getOuterHTML returns is just a fraction of the actual content on the browser side. Pretty much everything inside your element is rendered by LeafletJS, so the server side proxy knows nothing about its contents. That's why the thing you are trying will never work that way.

    I see you have two options. First would be to fetch the full html with executeJS instead. But I would be surprised if iText can interpret the rather complex structure provided by Leaflet in a meaningful way.

    Probably a better working solution would be to use something to render the current view on the browser side into an image first and then forward that image to iText. This HTMLtoCANVAS might be helpful (disclaimer: I have never used it myself).