堆栈内存溢出
  简体   繁体   English

Dompdf：每个部分或页面使用不同的页脚

[英]Dompdf: Use different footer per section or page

 原文  2015-10-06 11:00:47  4   1    php/ pdf/ dompdf

问题描述

When the example code below (copied from here and changed a bit) is processed using dompdf, it generates a five page PDF with three sections and a header and footer. 当使用dompdf处理下面的示例代码（从此处复制并稍作更改）时，它将生成一个五页的PDF，包含三个部分以及一个页眉和页脚。 Section 1 and 3 have two pages. 第1节和第3节有两页。

The document should have a different footer for each section. 该文档的每个部分应具有不同的页脚。 In this example code the footer is different for the first page of each section, but doet not display on the second (and later) pages of section 1 and 3. 在此示例代码中，每个节的第一页的页脚均不同，但在节1和3的第二页（及后续页）上未显示。

If I use one footer-div outside the sections and remove the other footers, then the footer continues over all pages. 如果我在各节之外使用一个页脚div并删除了其他页脚，则该页脚会在所有页面上继续。

How can I get the footer to display on the second pages as well? 如何使页脚也显示在第二页上？

HTML structure is not fixed to this example, as long as I get working code. 只要我能使用代码，HTML结构就不会固定在该示例上。

NB: if this can be solved using a different library, I'm open to that, but I prefer a dompdf solution. 注意：如果可以使用其他库解决此问题，我可以接受，但我更喜欢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>

1 个解决方案

解决方案1
 1  2015-10-09 17:52:01

There appears to be some bugginess around rendering a fixed-position element that's contained inside another element. 渲染包含在另一个元素内的固定位置元素似乎存在一些错误。

That being said, this can work ... sort of. 话虽如此，这可以工作。 Because of the way dompdf renders a document fixed position elements render starting on the page where they are encountered (this may change in the future, watch issue #491 ). 由于dompdf渲染文档的方式，固定位置元素从遇到它们的页面开始渲染（这可能会在以后发生变化，请观看＃491 ）。 Also, PDFs are rendered in layers with later elements layered on top of earlier elements. 此外，PDF呈现为分层，后期元素位于早期元素之上。 So with your structure each section footer is rendered on top of the previous footer. 因此，对于您的结构，每个节的页脚都呈现在前一个页脚的顶部。

The only problem is that the previous footers will show through unless you block them out. 唯一的问题是，除非您将它们删除，否则以前的页脚将显示出来。 Which you can easily do by adding a background color. 您可以通过添加背景色轻松地做到这一点。 It's a bit ugly structurally in the PDF because by the end of the document because all the footers will be on the page, but visually it should appear how you want. PDF中的结构有点丑陋，因为在文档末尾，因为所有页脚都在页面上，但是在视觉上它应该按照您的意愿出现。

So you need to do a few things: 因此，您需要做一些事情：

  1. Move the footers outside the section DIVs. 将页脚移到节DIV的外面。
  2. Give the footers a background color so that underlying footers are hidden. 为页脚提供背景色，以便隐藏基础页脚。
  3. You should really use classes instead of IDs to avoid any HTML parsing issues (IDs are supposed to be unique). 您应该真正使用类而不是ID来避免任何HTML解析问题（ID应该是唯一的）。

For example: 例如： 

<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>

Except this doesn't work as well as I thought it would. 除非这没有我想象的那样好。 The above sample does work if your sections are only a single page, but not if any section prior to the last is more than one page. 如果您的部分仅是一页，则上述示例确实适用，但是如果最后一个部分之前的任何部分都超过一页，则上述示例不起作用。 In that situation the second and subsequent pages of a section will have the footer of the last section. 在这种情况下，该节的第二页和后续页将具有最后一节的页脚。 So even the current quirkiness related to document processing is buggy. 因此，即使当前与文档处理相关的古怪之处也存在问题。 :/ ：/

Still it's possible to do, but you'll have to use inline script to achieve it. 仍然可以这样做，但是您必须使用内联脚本来实现它。 Overall your code can be similar, but you have to add some script and additional structure around your footer. 总体而言，您的代码可以相似，但是您必须在页脚周围添加一些脚本和其他结构。 

<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>

Note: the white background is still necessary because you can't add an object and stop it on the same page. 注意：仍然需要白色背景，因为您不能在同一页面上添加对象并将其停止。 So footers from any one-page sections will still show up on the first page of the following section. 因此，任何一页页面的页脚仍将显示在下一部分的第一页上。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Laravel 5：每页中的 DOMPDF(0.8.3) 页眉和页脚 - Laravel 5: DOMPDF(0.8.3) header and footer in each page dompdf一种删除最后一页页脚的方法？ - dompdf a way to remove the footer on the last page? 使用php将html页眉和页脚部分添加到特定页面 - use php to add html header and footer section to a particular page TCPDF不同部分中的不同页眉和页脚 - TCPDF Different Header and Footer in different section 未设置Dompdf页脚。 - Dompdf footer not set..? 在dompdf中设置页脚 - Setting footer in dompdf dompdf 排除菜单和页脚 - dompdf exclude menu and footer Dompdf页眉和页脚 - Dompdf header and footer 如何在 laravel 5.5 中使用分页符 dompdf - how to use page break dompdf in laravel 5.5 页脚部分在特定页面上上升 - The footer section goes up on a particular page
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM