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中的页面尺寸并且可以指定容器尺寸的特定长度，则这会更容易。
将容器设置为固定位置元素。它不会影响文档流程，并将应用于所有生成的页面。只需将边距放在页面上并将负值应用于border元素。

对于后者尝试类似：

<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 page-break-inside：avoid;财产在pdf的开头留下空白

2 个答案: