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

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).

Thank you very much for the HTMLtoCANVAS plugin.

I also had a problem that the picture was incorrect saved.The geometric shapes were located in another place on the map.

It was:

Become:

I found a solution to let Leaflet use CANVAS instead of SVG for shapes.

renderer: L.canvas()

Now the plugin works great. Many thanks.

If you need to use a leaflet map, you can use the plugin leaflet-simple-map-screenshoter https://github.com/grinat/leaflet-simple-map-screenshoter

I created the following class for it

import com.vaadin.flow.component.internal.PendingJavaScriptInvocation;
import com.vaadin.flow.component.internal.UIInternals;
import com.vaadin.flow.dom.Element;
import com.vaadin.flow.internal.StateNode;
import org.apache.commons.lang3.StringUtils;
import tetramap.gui.MapView;
import java.util.concurrent.CompletableFuture;
public class HtmlToCanvas {
MapView mapView;
public HtmlToCanvas(MapView mapView) {
this.mapView = mapView;
}
public CompletableFuture<String> takeScreenShot(Element e){
CompletableFuture<String> future = new CompletableFuture<>();
String id = e.getAttribute("id");
if (StringUtils.isEmpty(id)) {
e.setAttribute("id", "elementForScreenShot");
id = e.getAttribute("id");
}
StateNode node = e.getNode();
getJavaScriptInvoke(node, "let element = document.querySelector('#" + id +  "');\n" +
"this.simpleMapScreenshoter = L.simpleMapScreenshoter().addTo(" + mapView.getMap().getId() + ")\n" +
"let format = 'canvas' \n" +
"let overridedPluginOptions = {\n" +
"  mimeType: 'image/png'\n" +
"}\n" +
"function send(canvas) {\n" +
"canvasValue = canvas.toDataURL()\n" +
"element.dispatchEvent(new Event('canvasReady'));\n" +
"}\n" +
"this.simpleMapScreenshoter.takeScreen(format, overridedPluginOptions).then(canvas => {\n" +
"console.info(canvas)\n" +
"send(canvas);\n" +
"}).catch(e => {\n" +
"   console.error(e)\n" +
"})"
);
e.addEventListener("canvasReady", l -> getJavaScriptReturn(node, "canvasValue.valueOf()").then(jsonValue -> future.complete(jsonValue.asString())));
return future;
}
public PendingJavaScriptInvocation getJavaScriptInvoke(StateNode node, String expression) {
UIInternals.JavaScriptInvocation invocation = new UIInternals.JavaScriptInvocation(expression);
PendingJavaScriptInvocation pending = new PendingJavaScriptInvocation(node, invocation);
node.runWhenAttached((ui) -> ui.getInternals().getStateTree().beforeClientResponse(node, (context) -> {
if (!pending.isCanceled()) {
context.getUI().getInternals().addJavaScriptInvocation(pending);
}
}));
return pending;
}
public PendingJavaScriptInvocation getJavaScriptReturn(StateNode node, String expression) {
return getJavaScriptInvoke(node, "return " + expression);
}
}

And how to use takeScreenShot() with Vaadin

  HtmlToCanvas htmlToCanvas = new HtmlToCanvas(mapView);
CompletableFuture<String> completableFuture = htmlToCanvas.takeScreenShot(mapView.getElement());
completableFuture.thenRun(() -> {
...
Image image = new Image(completableFuture.get(), "screenshot");
String immagineBase64 = vaadinImage.getSrc().substring(22);
byte[] imageBytes = Base64.getDecoder().decode(immagineBase64.getBytes(StandardCharsets.UTF_8));
...
});