Rotativa生成的PDF无法正确呈现 - 分页符/元素中断

Question

过去一小时左右，我一直在颠倒网络，但似乎无法找到解决我渲染问题的方法。

我正在使用Rotativa（1.6.4）作为PDF创建库，它能够以几乎100％的准确度再现我投入的HTML。为什么差不多因为当图表不适合页面时，我转换为PDF的图表似乎会导致问题，应该将其转移到下一页。查看屏幕截图以获取更多详细信息。

从截图中可以看出，一张图表是重叠的，对我来说，这是一个未知的原因。

我尝试添加建议的分页符，但没有任何帮助：

.page-breaker {
  display: block;
  clear: both;
  page-break-after: always;
 }

图表周围的Wrappers有以下CSS规则：

.chartContainer {
  float: left;
  clear: both;
  width: 100%;
  height: 350px;
  margin: 20px auto;
  page-break-before: always;
  page-break-after: always;
}

Rotativa生成的PDF不仅渲染不正确，Chrome中的打印预览也是如此。所以，问题显然是在分页符和CSS之间 - 但解决方案仍然在那里。

任何帮助都将不胜感激。

Answer 1

忘记添加page-break-before或page-break-after。解决方案是添加 page-break-inside：avoid！important 规则。应该将规则添加到可能在分页符中断开的元素的容器/包装中。

Answer 2

无论我尝试过什么，它都不起作用。我发现页面 css 包含

<块引用>

body{ 显示：-webkit-box; }

当我评论这一行时，page-break-* 开始工作。