使用Grover Gem从HTML生成PDF时文本频繁被截断求助

1. 调整Grover生成配置 #

• 设置合理页面边距，给底部预留足够空间：

  Grover.new(html, margin: { top: '20px', right: '20px', bottom: '30px', left: '20px' }).to_pdf
  

• 启用背景渲染，避免样式缺失导致内容错位：

  Grover.new(html, print_background: true).to_pdf
  

• 配置合适视口尺寸，确保内容完整渲染：

  Grover.new(html, viewport: { width: 1200, height: 1600 }).to_pdf
  

2. 用CSS控制分页与内容布局 #

• 给易被截断的块级元素添加禁止内部分页样式：

  .content-block, p, .card {
    page-break-inside: avoid;
  }
  

• 定义@page规则统一页面尺寸和边距：

  @page {
    size: A4;
    margin: 20mm 15mm 25mm 15mm; /* 适当加大底部边距 */
  }
  

• 避免使用固定高度容器，改用min-height适配动态内容：

  .dynamic-container {
    min-height: 200px;
    /* 移除 height: 200px; 这类固定高度设置 */
  }
  

• 检查底部元素是否带有position: fixed或overflow: hidden样式，这类属性可能导致内容截断，按需调整。

3. 确保动态内容完全渲染 #

• 若内容为异步加载，设置等待时间或等待指定元素加载完成：

  # 等待5秒后生成PDF
  Grover.new(html, wait_for_timeout: 5000).to_pdf
  
  # 等待指定选择器的元素出现后生成
  Grover.new(html, wait_for_selector: '.dynamic-content').to_pdf
  

• 对于超长内容，在合适位置手动插入分页标记：

  .page-break {
    page-break-after: always;
  }
  

  在HTML需要分页的位置添加<div class="page-break"></div>

内容的提问来源于stack exchange，提问作者Bình Trương