Vaadin 7.3.6页面打印时如何隐藏按钮？

你的问题核心在于错误地使用了线程休眠来控制UI状态恢复，而且没有考虑Vaadin UI状态同步到客户端的异步性，以及浏览器print()操作的异步特性。我来帮你拆解问题并给出两种可靠的解决方案：

为什么你的原有代码会失效？ #

1. UI状态同步延迟：调用ui.access()隐藏按钮后，Vaadin需要把这个状态变更异步推送到客户端。你紧接着执行print()时，客户端可能还没收到按钮隐藏的更新，所以第一次点击打印的还是带按钮的页面，而线程休眠3秒后按钮又显示，让你误以为“没反应”。
2. 休眠时间不可靠：用户可能在打印对话框停留几秒到几分钟，固定3秒的休眠完全无法匹配实际场景，第二次点击时，休眠时间到了按钮已经显示，自然打印出带按钮的页面。
3. 线程操作UI的风险：Vaadin的UI操作应该尽量避免用独立线程处理，容易引发并发状态问题。

解决方案1：CSS媒体查询（最推荐，简洁稳定） #

这是最简单的方案，完全不需要修改UI状态或编写复杂JS，利用CSS的打印媒体查询自动隐藏按钮。

步骤： #

1. 给需要隐藏的按钮添加自定义样式名
2. 在项目的CSS文件中添加打印媒体查询规则

代码示例： #

final Button okButton = new Button(MessageService.getMessage("ok"));
final Button printButton = new Button(MessageService.getMessage("print"));
printButton.setStyleName("small-top-margin");

// 给按钮添加打印隐藏的样式名
okButton.addStyleName("print-hide");
printButton.addStyleName("print-hide");

printButton.addClickListener(event -> {
    logger.debug("click_print");
    // 只需要执行打印命令即可，CSS会自动处理隐藏
    JavaScript.getCurrent().execute("print();");
});

在你的项目CSS文件中添加：

/* 仅在打印场景下生效 */
@media print {
    .print-hide {
        display: none !important;
    }
}

这种方式的优势：

• 页面正常显示时按钮完全可见，打印时自动隐藏，无需手动控制UI状态
• 完全避免了客户端-服务器端的状态同步问题
• 代码简洁，维护成本极低

解决方案2：利用浏览器afterprint事件（适合需要动态控制的场景） #

如果必须通过Java代码控制按钮可见性，可以监听浏览器的afterprint事件，在打印完成（或用户取消打印）后自动恢复按钮显示，完全替代不可靠的线程休眠。

代码示例： #

final Button okButton = new Button(MessageService.getMessage("ok"));
final Button printButton = new Button(MessageService.getMessage("print"));
printButton.setStyleName("small-top-margin");
final UI currentUI = UI.getCurrent();

printButton.addClickListener(event -> {
    logger.debug("click_print");
    // 先在服务器端隐藏按钮
    printButton.setVisible(false);
    okButton.setVisible(false);

    // 执行打印，并监听afterprint事件触发服务器端恢复按钮的方法
    String jsCode = String.format(
        "print(); " +
        "window.addEventListener('afterprint', function() { " +
        "   %s.serverRestoreButtons(); " +
        "});",
        currentUI.getConnectorId()
    );
    JavaScript.getCurrent().execute(jsCode);
});

// 注册供JS调用的服务器端方法，用于恢复按钮可见性
currentUI.addJavaScriptFunction("serverRestoreButtons", arguments -> {
    currentUI.access(() -> {
        logger.debug("show_all_buttons");
        printButton.setVisible(true);
        okButton.setVisible(true);
    });
});

这种方式的优势：

• 精准匹配打印完成的时机，不管用户是打印还是取消对话框，都会触发按钮恢复
• 避免了线程休眠带来的所有问题
• 完全遵循Vaadin的UI交互规范

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