dompdf:分页后的上边距不起作用-6ren

dompdf:分页后的上边距不起作用

转载作者：行者123 更新时间：2023-12-01 22:36:40

我目前正在尝试使用 Wordpress 和(最新版本的)dompdf，遇到了一个关于格式的恼人问题。

我的问题:生成的第二页似乎没有考虑主要内容的上边距，导致与我的 Logo 重叠。您可以查看生成的 PDF under this link .

生成PDF的相关代码如下(目前还不完善，想先解决问题):

function ppt_pdf_output() {

// post-ID of referring page needed
$post=get_post($_POST['postid']);

$output = '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>'.$post->post_title.'</title>
<style>
body {
    margin: 30px 0 0 0;
    font-family:sans-serif;
    text-align:left;
}

img {
    margin: 15px 0;
}   

#header,
#footer {
  position: fixed;
  left: 0;
    right: 0;
    color: #aaa;
    font-size: 0.9em;
    line-height:1.2em;
}

#header {
  top: -30px;
    /*border-bottom: 0.1pt solid #aaa;*/
}

#footer {
  bottom: 0;
  border-top: 0.1pt solid #aaa;
}

#header table,
#footer table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    text-align: center;
    color: #000;
    font-size: 24px;
}

.entry-content {
    margin: 100px auto 35px auto;
    top: 0; left: 0; bottom: 0; right: 0;
    background-color: #d1d977;
    width:90%; height:auto;
}

.entry-title {
    font-size: 18px;
    text-align: center;
}

#header td,
#footer td {
  padding: 0;
    width: 50%;
}

#footer .page-number {
  text-align: center;
}

.page-number:before {
  content: "Seite " counter(page);
}

.gallery-item {
display:inline-block;
}

br[style] {
display:none;
}

.gallery + p {
clear:left;
}

</style>
</head>
<body><div id="header">
  <table>
    <tr>
      <td>ANTRAG</td>
      <td style="text-align: right;"><img src="path/to/logo.png" /></td>
    </tr>
  </table>
</div>

<div id="footer">
  <div class="page-number"></div>
</div>';
$output .='
<!--<h1 class="entry-title">'. $post->post_title .'</h1>-->
<div class="entry-content">' . 
    apply_filters('the_content',$post->post_content) . '</div>';

$output .= '</body></html>';            

return $output;
}

如您所见，第一页的格式是应该的(或者至少是我想要的)，但是在分页之后内容区域(出于可视化原因提供了绿色背景)只是从页面的开头开始，不管我给出的边距是多少。

有人知道如何解决这个问题吗？我已经为此工作了无数个小时，只是现在不知道该怎么做。

如有任何帮助，我们将不胜感激。

亲切的问候
奥利

更新:当然我找到了this solution仅仅只是。我会试试这个，看看是否可以解决这个问题。

更新 2: 仍然没有运气。我现在坚持使用以下代码(输出可以在之前提供的链接下找到):

function ppt_pdf_output() {

// post-ID of referring page needed
$post=get_post($_POST['postid']);

$output = '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>'.$post->post_title.'</title>
<style>
@page {
    margin: 120px 50px 80px 50px;}  

#header {
    position: fixed;
    top: -82px;
    width: 100%;
    height: 109px;
    background: #aaa url("path/to/logo.png") no-repeat right;
}

#content {
    width: 100%;
    height: 85%;
    background-color: #d1d977;
}

footer {
    position: fixed;
    bottom: -65px;
    height: 30px;
    background-color: #333399;
}

footer .page-number {
    text-align: center;
}

.page-number:before {
    content: "Seite " counter(page);
}

br[style] {
display:none;
}
</style>
</head>
<body><div id="header">
  <h2>ANTRAG</h2>
</div>

<footer>
  <div class="page-number"></div>
</footer>';
$output .='<h1>'. $post->post_title .'</h1>
<div id="content">' .
    apply_filters('the_content',$post->post_content) . '</div>';
$output .= '</body></html>';

return $output;
}

它看起来很脆弱。例如，一旦我更改 h1 元素的字体大小，它就会被 Logo 覆盖。分页后，它看起来还不错，但这似乎只是巧合 - 一旦我更改字体大小或文本，文本就会再次重叠。绝对定位会改变什么吗？或者您有任何其他关于如何解决这个恼人问题的建议吗？任何类型的边距似乎也不起作用。

最佳答案

您走在正确的轨道上。如您所见，当元素跨页拆分时(如您的内容区域)，一些格式信息不会遵循。这是设计使然。

正确的策略是定义页边距，使它们足够大以容纳您的页眉/页脚内容并将页眉/页脚放入该空间。然后内容将只填充文档的“主体”(即页边距内的空间)。这是您尝试过的，但是您没有为页眉提供足够的空间。页眉位于页边距内 82px，但页眉的高度为 109px。因此，任何有小边距的内容仍会落在标题下。

试试这个:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>"Kaffeefahrten" in Bornheim: hart durchgreifen, Senioren vor Betrügern schützen</title>
  <style>
  @page {
    margin: 120px 50px 80px 50px;
  }

  #header {
    position: fixed;
    top: -115px;
    width: 100%;
    height: 109px;
    background: #aaa url("path/to/logo.png") no-repeat right;
  }

  #content {
    background-color: #d1d977;
  }

  footer {
    position: fixed;
    bottom: -65px;
    height: 30px;
    background-color: #333399;
  }

  footer .page-number {
    text-align: center;
  }

  .page-number:before {
    content: "Seite " counter(page);
  }

  br[style] {
    display:none;
  }
  </style>
</head>
<body>
  <div id="header">
    <h2>ANTRAG</h2>
  </div>

  <footer>
    <div class="page-number"></div>
  </footer>

  <h1>"Kaffeefahrten" in Bornheim: hart durchgreifen, Senioren vor Betrügern schützen</h1>

  <div id="content">
    ...
  </div>
</body>
</html>