DOMPDF 分页符答案

【问题标题】：DOMPDF page breakDOMPDF 分页符
【发布时间】：2016-04-10 14:24:32
【问题描述】：

我正在尝试生成带有页眉、页脚和内容的报告。页眉和页脚工作正常，但是内容 div 的文本比我想要的高。 See the image。我真的不明白为什么页面突破这么高。

这是 CSS 代码：

@page { 
  margin: 180px 50px; 
}

#header { 
  position: fixed; 
  left: 0px; 
  top: -150px; 
  right: 0px; 
  height: 150px; 
  text-align: left; 
}

#footer { 
  position: fixed; 
  left: 0px; 
  bottom: -180px; 
  right: 0px; 
  height: 80px; 
  text-align: right; 
  background-color: lightblue 
}

#footer .page:after { 
  content: counter(page, upper-roman); 
}

#content { 
  padding-left: 10mm; 
  padding-right: 5mm; 
  line-height: 6mm; 
  background-color: lightgreen; 
  height: 850px;
}
#logo { 
  height: 4cm; 
}
#head_text { 
  display: inline-block; 
  line-height: 6mm; 
  padding-top: 15px; 
}

这是 HTML：

<html>
  <head>
    <style>
      '.$css.'
    </style>
  </head>
  <body>

    <div id="header">
      '.$header.'
    </div>

    <div id="footer">
      <p class="page">Página </p>
    </div>

    <div id="content">
      '.$content.'
    </div>

  </body>
</html>

有人可以帮忙解决这个问题吗？坦克！

【问题讨论】：

可以给html吗？并尝试改变 height: auto in #content
我将高度改为自动，没有任何区别。

标签： css pdf-generation dompdf

【解决方案1】：

如果您的 DOMPDF_DPI 设置为 72，那么 180 像素的边距是相当大的。 72 的 DPI 提供从 PX 到 PT（PDF 中的本机单位）的一对一翻译。 dompdf 生成的 PDF 文档始终为 72 PPI。这意味着内容周围有 2.5 英寸的边距。我不认为你打算把你的利润增加那么多。

我看到的另一个问题是您在内容元素上设置了高度条件。你真的不需要这个，当我运行一些测试渲染时，我发现它会导致一些问题。如果您希望您的内容背景具有特定颜色，那么我建议将其设置在 body 元素上，这是您文档内容的真正界限。

尝试以下方法：

@page { 
  margin: 180px 50px; 
}
#header { 
  position: fixed; 
  left: 0px; 
  top: -150px; 
  right: 0px; 
  height: 150px; 
  text-align: left; 
}

#footer { 
  position: fixed; 
  left: 0px; 
  bottom: -180px; 
  right: 0px; 
  height: 80px; 
  text-align: right; 
  background-color: lightblue 
}

#footer .page:after { 
  content: counter(page, upper-roman); 
}

body { 
  background-color: lightgreen; 
  height: 850px;
}
#content {
  padding-left: 10mm; 
  padding-right: 5mm; 
  line-height: 6mm; 
}
#logo { 
  height: 4cm; 
}
#head_text { 
  display: inline-block; 
  line-height: 6mm; 
  padding-top: 15px; 
}

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
  <div id="header">
    HEADER
  </div>

  <div id="footer">
    <p class="page">Página </p>
  </div>

  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id erat blandit, auctor massa eu, aliquam lacus. Suspendisse justo ante, gravida vel diam quis, porta luctus nisi. Donec id enim sem. Sed et lobortis magna. Ut et dignissim augue. Cras quam libero, feugiat ac auctor eget, semper a augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse quis hendrerit ex. Phasellus auctor dolor sit amet nibh rhoncus sagittis. Sed quis odio sit amet purus feugiat malesuada.</p>
  </div>
</body>
</html>

【讨论】：

您好 BrianS，感谢您的帮助。我试过你的建议，但没有奏效。同样的问题正在发生。我正在使用高度条件来避免文本在我想要他打破的地方之前打破。但这并没有什么不同。无论有没有更高的条件，都会发生同样的问题。我真的不明白为什么页面上的文字这么高。
背景颜色只是为了显示文本，由于某种我无法理解的原因，没有占据整个 div 'content'。
无论你的 div 高度如何，dompdf 都会在页面边界处分页。由于您的页边距，文本突破如此之高。使它们更小，以使页面上的文本更低。如果您想查看页面边界，可以为 body 元素添加边框。
天哪！我太白痴了，太明显了。非常感谢我的朋友，这对我很有帮助。