dompdf：分页符后的上边距不起作用 [英] dompdf: top-margin after page break not working
问题描述
此刻，我正在尝试使用Wordpress和dompdf（最新版本）dompdf，但遇到了有关格式的烦人问题。
我的问题：顶部-主要内容的空白似乎不在生成的第二页上考虑，导致与我的徽标重叠。您可以在此链接下查看生成的PDF 。
生成PDF的相关代码如下（由于我想先解决此问题，因此尚不完善）：
function ppt_pdf_output（）{
//需要引用页面的后ID
$ 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 {
保证金：15px 0;
}
＃header，
#footer {
位置：固定；剩余
：0；
：0；
颜色：#aaa;
字体大小：0.9em;
line-height：1.2em;
}
#header {
top：-30px;
/ *边界底部：0.1pt实心#aaa; * /
}
#footer {
bottom：0；
border-top：0.1pt实心#aaa;
}
#header table，
#footer table {
width：100％;
边界崩溃：崩溃；
边界：无；
text-align：center;
颜色：＃000；
font-size：24px;
}
.entry-content {
margin：100px auto 35px auto;
top：0；左：0；底部：0正确：0；
background-color：＃d1d977;
宽度：90％；高度：自动；
}
.entry-title {
font-size：18px;
text-align：center;
}
#header td，
#footer td {
padding：0;
宽度：50％；
}
#footer .page-number {
text-align：center;
}
.page-number：之前{
内容： Seite计数器（页面）；
}
.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>’;
返回$输出；
}
如您所见，首页上的格式应为（或至少达到我的预期），但是在页面中断后，内容区域（出于可视化原因带有绿色背景）只是从页面的开头开始，无论我给哪个空白。 p>
有人知道如何解决此问题吗？我已经为此工作了无数小时，只是现在不知道该怎么办。
任何帮助将不胜感激。
亲切问候
Olli
更新：当然，我发现了<仅此一种href = https://stackoverflow.com/questions/17955674/add-page-break-in-css-and-pdf>此解决方案。我会尝试一下，看看是否可以解决此问题。
UPDATE2：仍然没有运气。我现在停留在以下代码（可以在前面提供的链接下找到输出）：
function ppt_pdf_output（） {
//需要引用页面的后ID
$ post = get_post（$ _ POST ['postid']）;
$ output =’<！DOCTYPE html>
< html>
< head>
< meta charset = UTF-8 />
< title>’。$ post-> post_title。’< / title>
< style>
@page {
保证金：120px 50px 80px 50px;}
#header {
位置：固定；
top：-82px；
宽度：100％；
高度：109像素；
背景：#aaa url（ path / to / logo.png）无重复权限；
}
#content {
width：100％;
身高：85％；
background-color：＃d1d977;
}
页脚{
位置：固定；
底部：-65像素；
高度：30像素；
background-color：＃333399;
}
页脚.page-number {
text-align：center;
}
.page-number：之前{
内容： Seite计数器（页面）；
}
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>’;
返回$输出；
}
似乎太脆弱了。例如，一旦我更改h1元素的字体大小，它就会与徽标重叠。分页符之后，看起来还可以，但是这只是一个巧合-一旦我更改了字体大小或文本，文本就会再次重叠。绝对定位会改变什么吗？或者您还有其他建议来解决这个烦人的问题？
您在正确的轨道上。如您所见，当元素跨页拆分时（如您的内容区域一样），某些格式设置信息将不遵循。
正确的方法是来定义页边距，以便它们足够大以容纳页眉/页脚内容和将页眉/页脚放入该空间。然后，内容将仅填充文档的正文（即页边距内的空间）。这是您尝试的方法，但是您没有给标题留足够的空间。标头位于页面页边距内82px，但标头的高度为109px。因此，任何具有较小边距的内容仍将落在标题下。
请尝试以下操作：
<！DOCTYPE html>
< html>
< head>
< meta charset = UTF-8 />博恩海姆（Bornheim）的
< title> Kaffeefahrten：哈特·杜希格里芬（Hart durchgreifen），资深音乐人Betrügernschützen// title
< style>
@page {
保证金：120px 50px 80px 50px;
}
#header {
位置：固定；
top：-115px；
宽度：100％；
高度：109像素；
背景：#aaa url（ path / to / logo.png）无重复权限；
}
#content {
background-color：＃d1d977;
}
页脚{
位置：固定；
底部：-65像素；
高度：30像素；
background-color：＃333399;
}
页脚.page-number {
text-align：center;
}
.page-number：之前{
内容： Seite计数器（页面）；
}
br [style] {
display：none;
}
< / style>
< / head>
< body>
< div id = header>
< h2> ANTRAG< / h2>
< / div>
< footer>
< div class = page-number>< / div>
< / footer>在博恩海姆（Bornheim）的
< h1> ;： hart durchgreifen，Senioren vorBetrügernschützen< / h1>
< div id = content>
...
< / div>
< / body>
< / html>
请注意，您也不必为内容元素指定任何高度/宽度（除非您希望进一步限制它使用的空间。）
使用CSS3，您可以使用原始样式并重新使用通过应用 box-装饰中断 属性。但是截至撰写dompdf时，尚不支持此属性。
I'm experimenting with Wordpress and (the recent version of) dompdf at the moment and ran into an annoying problem regarding the formating.
My Problem: The top-margin of the main content seems not to be considered on the second page generated, resulting in an overlapping with my logo. You can view the generated PDF under this link.
The relevant code from which the PDF is generated reads as follows (it is not perfect yet as i want to resolve the issue first):
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;
}
As you can see, the formatting on the first page is as it should be (or at least as I intended it to be), but after the page break the content area (for visualization reasons provided with a green background) just starts at the beginning of the page, regardless of which number I give the margin.
Has anybody an idea how to resolve this issue? I've been working on this for countless hours and just don't know what to do at this point.
Any help would be greatly appreciated.
Kind regards
Olli
UPDATE: Of course I found this solution only just. I will try this and see if I can get the issue resolved with this.
UPDATE2: Still no luck. I'm now stuck with the following code (the output can be found under the link provided earlier):
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;
}
It seems just so fragile. For example, as soon as I change the font-size of the h1 element, it gets overlapped by the logo. After the page break, it looks okay, but that just seems an coincidence - as soon as I change the font-size or the text, the text again gets overlapped. Will absolute positioning change anything or do you have any other tipps as how to resolve this anoying issue? Margins of any kind don't seem to work either.
You're on the right track. As you've seen, when an element is split across pages (as your content area is) some of the formatting information does not follow. This is by design.
The correct tact is to define the page margins so that they are large enough to hold your header/footer content and place the header/footer into that space. The content will then just fill the "body" of the document (i.e. the space inside the page margins). This is what you've attempted, but you haven't given enough space for the header. The header is positioned 82px inside the page margin but the height of the header is 109px. Because of this any content that has a small margin will still fall under the header.
Try this instead:
<!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>
Note that you also don't have to specify any height/width for the content element (unless you want to further constrict the space it uses).
With CSS3 you could go with your original styling and re-use the margins by applying the box-decoration-break property. However as of writing dompdf does not yet support this property.
这篇关于dompdf：分页符后的上边距不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
