Question

我正在尝试使用Wordpress和（最新版本的）dompdf，并遇到了关于格式化的恼人问题。

我的问题：主要内容的上边距似乎没有在生成的第二页上考虑，导致与我的徽标重叠。您可以查看生成的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。我会尝试这个，看看我能否解决这个问题。

UPDATE2：仍然没有运气。我现在坚持使用以下代码（输出可以在前面提供的链接下找到）：

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元素的字体大小，它就会被徽标重叠。在分页后，它看起来没问题，但这似乎是巧合 - 只要我更改字体大小或文本，文本就会重叠。绝对定位会改变什么，或者你有什么其他的窍门来解决这个烦人的问题？任何种类的边缘似乎都不起作用。

Answer 1

你走在正确的轨道上。正如您所见，当一个元素跨页面拆分时（作为您的内容区域），一些格式化信息不会跟随。这是设计的。

正确的机智来定义页边距，以便它们足够大以容纳页眉/页脚内容并将页眉/页脚放入该空间。然后内容将填充文档的“主体”（即页边距内的空间）。这是您尝试过的，但是您没有为标题提供足够的空间。标题位于页边距内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>

请注意，您也不必为内容元素指定任何高度/宽度（除非您想进一步限制它使用的空间）。

使用CSS3，您可以使用原始样式并通过应用box-decoration-break属性重新使用边距。但是在撰写时，dompdf尚不支持此属性。

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

1 个答案: