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

Posted

技术标签:

【中文标题】Rotativa 生成的 PDF 无法正确呈现 - 分页符/元素中断【英文标题】:Rotativa generated PDF doesn't render correctly - page break/element break 【发布时间】:2015-09-12 05:39:41 【问题描述】:

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

我正在使用 Rotativa (1.6.4) 作为 PDF 创建库,它能够以几乎 100% 的准确度重现我扔给它的 html。为什么几乎;因为当图表不适合页面时,我转换为 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 之间——但解决方案仍然存在。

任何帮助将不胜感激。

【问题讨论】:

【参考方案1】:

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

【讨论】:

感谢这个完美的想法! - 作为旁注:我在主要部分周围有一个<section>...</section>(从 MVC4 自动生成的东西 - 我必须删除 CSS overflow: auto 才能让任何 page-break-* 样式工作!【参考方案2】:

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

body 显示:-webkit-box;

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

【讨论】:

以上是关于Rotativa 生成的 PDF 无法正确呈现 - 分页符/元素中断的主要内容,如果未能解决你的问题,请参考以下文章

如何为使用 Rotativa 生成动态内容的 PDF 生成页脚

.net core 使用Rotativa创建PDF文档

Rotativa 在本地主机中工作,但在我的 Azure Web 应用程序中无法工作 - 2021

html2canvas 无法正确呈现(重叠颜色)

打印到 PDF:文本呈现不正确

Dompdf-Laravel Unicode 字符无法正确呈现