4

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

我使用 Rotativa (1.6.4) 作为 PDF 创建库,它能够以几乎 100% 的准确度重现我扔给它的 HTML。为什么几乎;因为当图表不适合页面时,我转换为 PDF 的图表似乎会导致问题,应该将其转移到下一页。查看屏幕截图以获取更多详细信息。

损坏的 PDF

从屏幕截图中可以看出,一张图表重叠,对我来说,原因不明。

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

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

围绕图表的包装器具有以下 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 之间——但解决方案仍然存在。

任何帮助,将不胜感激。

4

2 回答 2

7

忘记添加 page-break-before 或 page-break-after 。解决方案是添加page-break-inside: Avoid !important规则。规则应该添加到可能在分页符中被破坏的元素的容器/包装器中。

于 2015-06-25T15:24:15.240 回答
0

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

身体{显示:-webkit-box;}

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

于 2021-07-08T09:51:11.697 回答