Jmix框架下Vaadin垂直布局完整打印问题求助

针对你遇到的vaadin-scroller导致打印仅显示单页的问题，可通过打印媒体查询下的CSS调整，强制解除滚动容器的限制并优化布局的分页规则，实现完整内容的多页打印。

核心CSS代码 #

@media print {
  /* 解除vaadin-scroller的滚动限制，让内容完全展开 */
  vaadin-scroller,
  vaadin-scroller > div,
  .vertical-layout-class vaadin-scroller {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
  }

  /* 优化垂直布局的打印样式，修复分页异常 */
  .vertical-layout-class {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
    position: relative !important; /* 替换fixed定位，保持正常文档流 */
    background-color: white;
    page-break-inside: avoid; /* 避免布局本身被分页截断 */
  }

  /* 可选：避免子元素被分页拆分，提升可读性 */
  .vertical-layout-class > * {
    page-break-inside: avoid;
  }
}

关键调整说明 #

1. 针对vaadin-scroller：强制取消其overflow、height、max-height限制，让容器内的所有内容完全展开，不再被滚动条隐藏，这样打印机能识别到超出单页的内容并自动分页。
2. 修改垂直布局定位：将position: fixed改为relative，固定定位会让元素脱离文档流，导致分页规则失效，相对定位能保持正常的文档流结构，确保分页逻辑生效。
3. 分页规则优化：page-break-inside: avoid用于避免布局或其子元素被分页拆分，保证内容块的完整性。

额外提示 #

• 如果你的vaadin-scroller有自定义类名，将选择器中的vaadin-scroller替换为对应的类名即可。
• 测试时用浏览器打印预览（Ctrl+P）查看效果，可根据实际内容调整page-break-inside的应用范围。

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