DOMPDF 内部分页：避免；属性在 pdf 开头留下空白

Question

在我的代码中，我试图向 pdf 添加外部边框，但是当我这样做时，我的 pdf 的内容在中间中断并在第二页继续。为了克服这个问题，我在父级 div 上使用了 page-break-inside:avoid; 属性。但这导致了一个新的奇怪问题，它保持第一页空白（无边框）并将整个内容添加到第二页（有边框） 的 pdf.

我无法理解我做错了什么。

我在下面详细说明虚拟代码片段 -

<style type="text/css">
@page { margin: 0px; }
body { margin: 0px; }
html { margin: 0px;}
.back-img
{
    background: url('ImageURL');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100%;
    padding-top: 100px;
    padding-left: 100px;
    padding-right: 100px;
    width:100%;
    height:100%;
}
</style>
<div style="page-break-inside:avoid;" class="back-img">
    <div style="text-align: center;">
        <h1>Heading Text</h1>
        <br>
        <img src="ImgURL" height="100">
        <br><br>
        Some Text Here
        <br>
        Some Text Here.. Some text here..
        <br>
        Some Text Here
        <br><br>
        Some Text Here
        <br><br>
        3-4 lines of paragraph here
        <br><br>
        <img src="ImgURL" height="50">
        <br>
        Some text Here
        <br>
        Some Text Here
        <br>
        Some Text Here
    </div>
</div>

Dompdf 版本为 0.7.0 PHP 版本是 7.0.18

非常感谢您的帮助。

Answer 1

这可能是因为您将容器 div 的宽度和高度设置为 100%。 Dompdf 不能很好地处理与页面边缘碰撞的流动元素。您有几个选项可以尝试解决该问题：

将容器的高度和宽度设置为比包含页面小一点。如果您知道 PT 中的页面尺寸并且可以为容器尺寸指定特定长度，这会更容易。
将容器设置为固定位置元素。它不会影响文档流，并将应用于所有生成的页面。只需将页边距放在页面上并将负值应用于边框元素。

对于后者，请尝试类似的操作：

<style type="text/css">
@page { margin: 100px; }
.back-img
{
  position: fixed;
  background: url('ImageURL');
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100%;
  top: -50px;
  right: -50px;
  bottom: -50px
  left: -50px;
}
</style>
<div class="back-img"></div>
<div style="text-align: center;">...</div>

Answer 2

这些年来我一直遇到这个问题。

一个似乎有效的解决方案是确保第一项是

page-break-inside: auto

第一个元素，然后

page-break-inside: avoid

在后面的任何元素上

DOMPDF 内部分页：避免；属性在 pdf 开头留下空白

DOMPDF page-break-inside:avoid; property is leaving a blank at start of the pdf

css

dompdf

laravel-5

DOMPDF 内部分页：避免； 属性 在 pdf 开头留下空白

DOMPDF page-break-inside:avoid; property is leaving a blank at start of the pdf

css

dompdf

laravel-5

DOMPDF 内部分页：避免；属性在 pdf 开头留下空白