Vaadin组件中执行多行JavaScript代码问题求助

你的问题出在JS代码里的未定义变量错误，导致代码执行中断：你在回调函数里写了var dimensions = map.getSize();，但JS作用域里并没有map这个变量——Java端传入的map实例对应的JS变量是$0（executeJs的第一个参数占位符），这个语法错误会让浏览器终止后续代码执行，所以只有第一个alert('-1')能触发。

另外，用字符串拼接多行JS代码容易出现格式或语法疏漏，建议改用Java文本块（Java 15+支持）来编写完整的JS逻辑，同时添加必要的错误处理，避免小问题导致代码停摆。

修改后的代码如下：

@NpmPackage(value = "leaflet-image", version = "0.4.0")
@JsModule("leaflet-image/leaflet-image.js")
@Tag("leaflet-image")
public class LLeafletImage extends Div {

    private static final long serialVersionUID = 1L;

    public void print(LMap map) {
        // 使用Java文本块编写多行JS，避免拼接错误
        String jsCode = """
            alert('-1');
            // 调用leafletImage，$0对应传入的map实例
            leafletImage($0, function(err, canvas) {
                // 先处理错误，避免回调内出错导致后续逻辑无法执行
                if (err) {
                    console.error('leafletImage执行出错:', err);
                    return;
                }
                alert('0');
                var img = document.createElement('img');
                // 使用$0获取传入的map实例的尺寸
                var dimensions = $0.getSize();
                img.width = dimensions.x;
                img.height = dimensions.y;
                img.src = canvas.toDataURL();
                // 先检查目标容器是否存在，避免DOM操作报错
                var imagesContainer = document.getElementById('images');
                if (imagesContainer) {
                    imagesContainer.innerHTML = '';
                    imagesContainer.appendChild(img);
                } else {
                    console.error('未找到id为"images"的DOM元素');
                }
            });
            alert('2');
        """;
        UI.getCurrent().getPage().executeJs(jsCode, map.clientComponentJsAccessor());
    }
}

关键修改点： #

• 将JS中的map.getSize()替换为$0.getSize()，正确引用Java端传入的map实例。
• 用Java文本块"""包裹多行JS代码，摆脱字符串拼接的繁琐和潜在错误。
• 在leafletImage回调中添加错误捕获，同时检查目标DOM元素是否存在，避免小错误中断代码执行。
• 打开浏览器开发者工具（F12）的控制台，能快速定位JS执行时的报错信息，方便排查问题。

内容的提问来源于stack exchange，提问作者padmalcom