Vaadin 14如何实现点击按钮展示resources目录下静态HTML文档

不强制要求自行编写Controller，两种实现方案可根据你的场景选择：

方案1：无需自定义Controller（Vaadin原生实现，无权限管控需求时推荐） #

Vaadin14默认会映射src/main/resources/META-INF/resources目录下的所有静态资源，直接对外暴露访问，不需要额外编写Controller：

• 先把你的HTML说明文档和关联的css、图片等附属资源放到src/main/resources/META-INF/resources下的自定义目录，比如doc/internal-manual.html，对应的访问路径就是/doc/internal-manual.html
• 按钮点击事件可以选择开新标签页展示，或者在当前应用内弹窗嵌入展示：
  1. 新标签页打开代码示例：

  Button manualBtn = new Button("查看使用说明", e -> {
      // 第二个参数_blank表示新开标签页
      UI.getCurrent().getPage().open("/doc/internal-manual.html", "_blank");
  });
  

  2. 弹窗内嵌入展示代码示例：

  Button manualBtn = new Button("查看使用说明", e -> {
      IFrame iFrame = new IFrame("/doc/internal-manual.html");
      iFrame.setWidthFull();
      iFrame.setHeight("650px");
      
      Dialog dialog = new Dialog(iFrame);
      dialog.setWidth("85vw");
      dialog.open();
  });
  

该方案在Vaadin14的开发模式和生产打包模式下都可正常生效，无需额外配置静态资源映射规则。

方案2：自定义Controller实现（适合需要权限管控的场景） #

如果你的内部说明文档不允许未授权用户直接访问，建议自行编写Controller增加权限校验逻辑：

• 把HTML文档放到src/main/resources下的非公开目录，比如private-doc/internal-manual.html，避免被Vaadin默认的静态资源规则直接暴露
• 编写Controller读取资源返回，可自行插入权限校验逻辑：

@Controller
public class InternalManualController {
    @GetMapping("/auth/manual")
    public void getManual(HttpServletResponse response) throws IOException {
        // 此处可添加自定义权限校验逻辑，比如校验当前用户是否登录、是否有查看权限
        response.setContentType("text/html;charset=UTF-8");
        try (InputStream inputStream = getClass().getResourceAsStream("/private-doc/internal-manual.html")) {
            StreamUtils.copy(inputStream, response.getOutputStream());
        }
    }
}

• 按钮的跳转/嵌入逻辑和方案1一致，只需要把资源路径替换为/auth/manual即可。

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