2015-10-06 113 views
0

当使用dompdf处理下面的示例代码(从here复制并更改了一点)时,它会生成一个包含三个部分和页眉和页脚的五页PDF。第1节和第3节有两页。Dompdf:使用不同页脚或页面

该文档应为每个部分有不同的页脚。在此示例代码中,每个部分的第一页的页脚是不同的,但不会显示在第1部分和第3部分的第二页(以及后面)页面上。

如果我在部分外使用一个页脚,其他页脚,然后页脚继续在所有页面上。

我怎样才能让页脚显示在第二页上呢?

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> 

回答

1

围绕渲染包含在另一个元素中的固定位置元素似乎存在一些繁琐。

这就是说,这可以工作...排序。由于dompdf呈现文档的固定位置元素渲染的方式从遇到它的页面开始(这可能会在将来更改,请参阅issue #491)。此外,PDF以层叠形式呈现,随后的元素分布在先前的元素之上。因此,对于您的结构,每个部分页脚都会显示在上一页页脚的顶部。

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

所以,你需要做几件事情:

  1. 移动部分的DIV外的注脚。
  2. 为页脚提供背景色,以便隐藏底层页脚。
  3. 您应该真的使用类而不是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> 

注:白色背景仍然是必要的,因为你不能添加一个对象,并停止在同一页上。因此,任何单页部分的页脚仍将显示在以下部分的第一页上。

+0

感谢这两个例子。有了一个页面部分,第一个例子可以工作我已经尝试了两种,但它只是不能解决问题。 +1的努力。 – SPRBRN

+0

我做了一个更彻底的测试,输出仍然存在一些问题。 (即将发布的)0.7.0版本似乎比0.6.1版本运行得更好。我仍然必须在页脚上放置背景颜色。不知道为什么添加/停止对象方法没有做他们应该做的。 – BrianS

相关问题