Question

当使用dompdf处理下面的示例代码（从here复制并稍微更改一下）时，它会生成一个包含三个部分和页眉和页脚的五页PDF。第1节和第3节有两页。

每个部分的文档应该有不同的页脚。在此示例代码中，每个部分的第一页的页脚是不同的，但是在第1部分和第3部分的第二页（和后面的页面）上不显示页脚。

如果我在部分之外使用一个页脚div并删除其他页脚，则页脚将继续覆盖所有页面。

如何让页脚也显示在第二页？

HTML结构不固定在这个例子中，只要我得到工作代码。

注意：如果可以使用不同的库解决这个问题，我对此持开放态度，但我更喜欢dompdf解决方案。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>Header and Footer example</title>
<style type="text/css">

@page {
    margin: 2cm;
}

body {
  font-family: sans-serif;
    margin: 0.5cm 0;
    text-align: justify;
}

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

#header {
  top: 0;
    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;
}

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

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

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

hr {
  page-break-after: always;
  border: 0;
}

</style>

</head>

<body>

<div id="header">
    <div class="page-number"></div>
</div>

<div class="section section1">
<div id="footer">
    Footer example 1
</div>
<h2>Section 1</h2>

<p>
    <img src="images/dompdf_simple.png" style="float: right; margin: 0.5em;" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit
amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat
in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo
in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue
blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales
hendrerit.</p>
<p>
    <img src="images/dompdf_simple.png" style="float: right; margin: 0.5em;" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit
amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat
in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo
in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue
blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales
hendrerit.</p>
<p>
    <img src="images/dompdf_simple.png" style="float: right; margin: 0.5em;" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit
amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat
in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo
in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue
blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales
hendrerit.</p>
<p>
    <img src="images/dompdf_simple.png" style="float: right; margin: 0.5em;" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit
amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat
in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo
in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue
blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales
hendrerit.</p>
</div><!-- div.section1 -->
<hr/>

<div class="section section2">
<div id="footer">
    Footer example 2
</div>
<h2>Section 2</h2>

<p>
  <img src="images/goldengate.jpg" style="float: left; padding: 0.5em;" width="180"  />
    Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut
orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius,
ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus
sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer
id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae
elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et
sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue
eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non
elementum posuere, metus purus iaculis lectus, et tristique ligula
justo vitae magna. Morbi vel erat non mauris convallis vehicula. Nulla et
sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue
eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non
elementum posuere, metus purus iaculis lectus, et tristique ligula
justo vitae magna.</p>
</div><!-- div.section2 -->
<hr/>
<div class="section section3">
<div id="footer">
    Footer example 3
</div>
<h2>Section 3</h2>

<!-- yeah, we'll have to do better for inline floating elements -->
<p><span style="float: left; font-size: 4em; width: 0.7em; height: 0.9em; line-height: 1;">A</span>liquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>

<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>

<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>

<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>

<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>

<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>

<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>

<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>

<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>

<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
</div><!-- div.section3 -->

</body></html>

Answer 1

在渲染一个包含在另一个元素中的固定位置元素时，似乎存在一些不稳定。

话虽这么说，这个可以工作......有点儿。由于dompdf呈现文档的方式固定位置元素从遇到它们的页面开始呈现（这可能在将来发生变化，请观察issue #491）。此外，PDF以层的形式呈现，后面的元素分层在早期元素之上。因此，使用您的结构，每个部分页脚都会呈现在前一个页脚的顶部。

唯一的问题是，除非您阻止它们，否则之前的页脚将显示出来。您可以通过添加背景颜色轻松完成。它在PDF中的结构有点难看，因为在文档的末尾，因为所有页脚都在页面上，但在视觉上它应该以你想要的方式出现。

所以你需要做一些事情：

将页脚移到DIV部分之外。
为页脚添加背景颜色，以隐藏基础页脚。
您应该使用类而不是ID来避免任何HTML解析问题（ID应该是唯一的）。

例如：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>Header and Footer example</title>
<style type="text/css">

@page {
    margin: 2cm;
}

body {
  font-family: sans-serif;
    margin: 0.5cm 0;
    text-align: justify;
}

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

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

.footer {
  bottom: 0;
  border-top: 0.1pt solid #aaa;
  background-color: white;
}

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

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

.section {
  page-break-after: always;
}

</style>

</head>

<body>

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

<div class="footer">
    Footer example 1
</div>

<div class="section section1">
<h2>Section 1</h2>

<!-- section content -->
</div>


<div id="footer2" class="footer footer2">
    Footer example 2
</div>

<div class="section section2">
<h2>Section 2</h2>

<!-- section content -->
</div>

</body></html>

除了这个并不像我想的那样有效。如果您的部分只是一个页面，则上述示例可以正常工作，但如果最后一个部分之前的部分不是一个页面，则不会。在这种情况下，一个部分的第二页和后一页将具有最后一部分的页脚。因此，即使是与文档处理相关的当前怪癖也是错误的。：/

仍然可以这样做，但是您必须使用内联脚本来实现它。总体而言，您的代码可能类似，但您必须在页脚周围添加一些脚本和其他结构。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>Header and Footer example</title>
<style type="text/css">

@page {
    margin: 2cm;
}

body {
  font-family: sans-serif;
    margin: 0.5cm 0;
    text-align: justify;
}

/* positioning */

.header,
.footer-positioner {
  left: 0;
    right: 0;
}

.header {
  position: fixed;
  top: 0;
}

.footer-positioner {
  position: absolute;
  bottom: 0;
}


/* styling */

.header,
.footer {
    background-color: white;
    color: #aaa;
    font-size: 0.9em;
}

.header {
    border-bottom: 0.1pt solid #aaa;
}

.footer {
  border-top: 0.1pt solid #aaa;
  background-color: white;
}

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

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

.section {
  page-break-before: always;
}
.section:first-child {
  page-break-before: auto;
}

</style>

</head>

<body>

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

<div class="section section1">

  <div class="footer-positioner">
    <script type="text/php">
    $GLOBALS['section'] = $pdf->open_object();
    </script>
      <div class="footer">
        Footer example 1
      </div>
    <script type="text/php">
    $pdf->close_object();
    $pdf->add_object($GLOBALS['section'], 'all');
    </script>
  </div>

  <h2>Section 1</h2>

  <!-- section content -->

  <script type="text/php">
  $pdf->stop_object($GLOBALS['section']);
  </script>

</div>


<div class="section section2">

  <div class="footer-positioner">
    <script type="text/php">
    $GLOBALS['section'] = $pdf->open_object();
    </script>
      <div class="footer">
        Footer example 2
      </div>
    <script type="text/php">
    $pdf->close_object();
    $pdf->add_object($GLOBALS['section'], 'all');
    </script>
  </div>

  <h2>Section 2</h2>

  <!-- section content -->

  <script type="text/php">
  $pdf->stop_object($GLOBALS['section']);
  </script>

</div>

</body></html>

注意：仍然需要白色背景，因为您无法添加对象并将其停在同一页面上。因此，任何一页部分的页脚仍将显示在下一部分的第一页上。

Dompdf：每个部分或页面

1 个答案: