add-on HTML2CANVAS with Anchor

Flow
1

I try to integrate this add-on in my Vaadin24 app. The example given for creating a screenshot for button click works perfectly. I want to have the screenshot open by the browser in a separate Tab. Thus I use Anchor. But it seems that the CompletableFuturewhich Html2Canvas using inside, doesn’t work within the streamfactory needed by the anchor.

Anchor anchor = new Anchor(
            new StreamResource("bauzeitenplan.pdf",
                () -> {
                ByteArrayInputStream result = null;
                CompletableFuture<String> completableFuture = HTML2CANVAS.takeScreenShot(bauzeitenplan.getElement());
                completableFuture.thenRun(() -> {
                    try {
                        String base64 = completableFuture.get();
                    } catch (InterruptedException | ExecutionException ignored) {
                    }
                });
// here, also a loop waiting for completableFuture.isDone() doesn't help
                try {
                    result = new ByteArrayInputStream(base64decoder.decode(content));
                } catch (InterruptedException | ExecutionException e) {
                    e.printStackTrace();
                }
                return result;
            }), "");
        anchor.getElement().setAttribute("download", true);
        anchor.add(new Button("Print"));
        return anchor;

How can I integrate the Future with the Anchor ?
But maybe there is any other solution, to download a file by the browser than with Anchor/ Streamfactory ?

2

Try this component I created for you:

public static class PrintScreenBtn extends Anchor implements StreamResourceWriter {
    CompletableFuture<byte[]> bytesComingInFromTheOldScreen = new CompletableFuture<>();

    public PrintScreenBtn(Component componentToPrint) {
        setText("PRINT");
        setHref(new StreamResource("screenshot.png", this));
        setTarget("_blank");
        getElement().addEventListener("click", e -> {
            HTML2CANVAS.takeScreenShot(componentToPrint.getElement()).thenAccept(dataurl -> {
                String base64str = dataurl.toString().substring("data:image/png;base64,".length());
                bytesComingInFromTheOldScreen.complete(Base64.getDecoder().decode(base64str));
bytesComingInFromTheOldScreen = new CompletableFuture<>();
            });
        });

    }

    @Override
    public void accept(OutputStream out, VaadinSession session) throws IOException {
        try {
            out.write(bytesComingInFromTheOldScreen.get());
        } catch (IOException | InterruptedException | ExecutionException e) {
            throw new RuntimeException(e);
        }

    }
}
3

Added one line to make it take a new one on each click.

4

Wow :star_struck: works like a charm. Thank you so much @quintessential-ibex ! Compared with my previous solution using nodeJS and puppeteer HTML2CANVAS is a little bit slower but I can go without a node integration on the target machine / container which is really nice.

5

:man_bowing: