在Vaadin grid中如何右键打开上下文菜单复制单元格内容？

Vaadin官方内置了GridContextMenu组件，无需引入第三方依赖即可实现右键唤起菜单、复制单元格内容的需求，具体实现如下：

核心实现代码（适用于Vaadin 14+ LTS版本） #

import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.grid.contextmenu.GridContextMenu;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.UI;

// 假设你的Grid绑定的实体类为自定义的User
Grid<User> grid = new Grid<>(User.class);
// 配置Grid的列、数据源等常规逻辑此处省略
// ...

// 给Grid添加上下文菜单
GridContextMenu<User> contextMenu = grid.addContextMenu();
// 新增复制菜单项
contextMenu.addItem("复制当前单元格内容", event -> {
    // 仅当右键点击在有效单元格上时触发逻辑
    if (event.getItem().isPresent() && event.getColumn().isPresent()) {
        User rowData = event.getItem().get();
        Grid.Column<User> column = event.getColumn().get();
        Object cellValue = column.getValueProvider().apply(rowData);
        // 处理空值
        String copyContent = cellValue == null ? "" : cellValue.toString();
        // 调用浏览器剪贴板API执行复制
        UI.getCurrent().getPage().executeJs("navigator.clipboard.writeText($0)", copyContent);
        // 操作完成提示
        Notification.show("内容已复制到剪贴板", 1500, Notification.Position.TOP_CENTER);
    }
});

注意事项 #

• 版本适配：Vaadin 14以下版本无内置GridContextMenu，需要单独引入vaadin-context-menu附加组件，剪贴板调用逻辑也需要对应调整
• 权限处理：部分浏览器会限制非用户主动触发的剪贴板操作，本实现的复制逻辑绑定在用户点击菜单项的主动操作中，兼容性更高
• 自定义扩展：你可以根据业务需求新增复制整行、复制整列等其他菜单项，逻辑和上述实现一致，只需调整取值范围即可

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