如果内容在 mpdf 中重叠,如何将页脚推到下一页?
How can I push the footer to the next page if the content overlaps it in mpdf?
从技术上讲,我知道如何在 mpdf 中设置 html 页脚,但我遇到了一个无法解决的问题。
我正在生成发票。发票有一个项目 table,项目数量可能会有所不同。在发票的最后一页(即在项目 table 之后),我设置了公司同意的页脚和签名字段。因此包含这两个的块位于当前页面的末尾(高度约为 70 毫米)。它不一定需要是页脚;固定块也有效(但同样的问题适用)。
问题
当列表项相对较小时,它会按预期完美运行;还有,当列表项比较多的时候。但是,当列表项在一个范围内时,内容会重叠。
目前我试过:
选项 1
使用底部的固定位置设置块。
问题:相同。
选项 2
将 margin-bottom 增加到 70mm。
问题:重叠是固定的,但是当内容更多并且需要有两页或更多页的项目时 - 它会在前几页中留下太多(70 毫米)的空白区域。
选项 3
将 setAutoBottomMargin
设置为 stretch
问题:相同。 (感觉不出什么区别)
选项 4
为最后一页设置一个命名页。
问题:指定页面在第一页上不起作用。 IE。它总是有第二页。所以即使内容很小也至少需要两页。
我期望它的表现如何
- 内容少时。将此块推到当前页的末尾。
- 当内容在范围内时,填满可用空间。并将此块推到下一页。
注意:我使用<sethtmlpagefooter>
作为运行时设置页面页脚的最后一个标签。
有人可以帮我吗?
如果您需要当前输出的任何图像样本,我可以提供。但我认为这是一个非常普遍的要求,并且有人已经解决了这个问题。
如果我的解释不对。请告诉我,如果需要我可以提供更多信息。
谢谢
我正在更新此 post,因为当您需要在所有其他页面上使用默认页脚而我们的最后一页页脚本身位于第一页时,我发现此方法存在问题。
页脚被单独推到下一页。
但这是一个边缘案例。
要使此方法起作用,有一个要求。 IE。 div
必须在顶层
从技术上讲,我最终将 选项 1 与我在旧答案中描述的方法结合使用。
我最后做了什么
<body>
<div> ... </div>
<table> ... </table>
.
.
.
<div style="height: 75px"></div>
<div class="fixed-bottom border-top border-white">
... <!-- footer content -->
</div>
</body>
border-top
和 border-white
是必要的,因为没有它们,mpdf 在我的特定版本中计算正确宽度时会出现问题
我通过将上部 div 也设为 fixed-bottom
并对 border-top
进行不同的着色来找出准确的高度,这样我就可以看到高度何时准确
css 使用
.fixed-bottom {
position: fixed;
right: 0mm;
bottom: 0mm;
left: 0mm;
z-index: 1030;
}
.border-top {
border-top: 1px solid #000;
}
.border-white {
border-color: #fff;
}
Original Answer
After a bit of struggle I have found a work around.
What I did
- defined a named html footer block with the content I want.
- set the footer after the items table using
sethtmlpagefooter
, so that it is in the last page.
- added an empty block(
div
) with a height compensating for the height of the footer & required padding between the items table and
the sethtmlpagefooter
call.
Issues resolved
- when the list items are (less & more) in number it already behaves as expected
- when the list items are in the range which overlaps, instead of the content overlapping the footer- now the empty block overlaps it till
the point where the items are just near the footer. so if the items
increases the empty block pushes the footer to the next page. If the
items increases more it takes up the available space in the previous
page as there is no big margins defined
Just documenting here so it may be refferred by anyone having the same
issue.
从技术上讲,我知道如何在 mpdf 中设置 html 页脚,但我遇到了一个无法解决的问题。
我正在生成发票。发票有一个项目 table,项目数量可能会有所不同。在发票的最后一页(即在项目 table 之后),我设置了公司同意的页脚和签名字段。因此包含这两个的块位于当前页面的末尾(高度约为 70 毫米)。它不一定需要是页脚;固定块也有效(但同样的问题适用)。
问题
当列表项相对较小时,它会按预期完美运行;还有,当列表项比较多的时候。但是,当列表项在一个范围内时,内容会重叠。
目前我试过:
选项 1
使用底部的固定位置设置块。
问题:相同。
选项 2
将 margin-bottom 增加到 70mm。
问题:重叠是固定的,但是当内容更多并且需要有两页或更多页的项目时 - 它会在前几页中留下太多(70 毫米)的空白区域。
选项 3
将 setAutoBottomMargin
设置为 stretch
问题:相同。 (感觉不出什么区别)
选项 4
为最后一页设置一个命名页。
问题:指定页面在第一页上不起作用。 IE。它总是有第二页。所以即使内容很小也至少需要两页。
我期望它的表现如何
- 内容少时。将此块推到当前页的末尾。
- 当内容在范围内时,填满可用空间。并将此块推到下一页。
注意:我使用<sethtmlpagefooter>
作为运行时设置页面页脚的最后一个标签。
有人可以帮我吗?
如果您需要当前输出的任何图像样本,我可以提供。但我认为这是一个非常普遍的要求,并且有人已经解决了这个问题。
如果我的解释不对。请告诉我,如果需要我可以提供更多信息。
谢谢
我正在更新此 post,因为当您需要在所有其他页面上使用默认页脚而我们的最后一页页脚本身位于第一页时,我发现此方法存在问题。 页脚被单独推到下一页。 但这是一个边缘案例。
要使此方法起作用,有一个要求。 IE。 div
必须在顶层
从技术上讲,我最终将 选项 1 与我在旧答案中描述的方法结合使用。
我最后做了什么
<body>
<div> ... </div>
<table> ... </table>
.
.
.
<div style="height: 75px"></div>
<div class="fixed-bottom border-top border-white">
... <!-- footer content -->
</div>
</body>
border-top
和 border-white
是必要的,因为没有它们,mpdf 在我的特定版本中计算正确宽度时会出现问题
我通过将上部 div 也设为 fixed-bottom
并对 border-top
进行不同的着色来找出准确的高度,这样我就可以看到高度何时准确
css 使用
.fixed-bottom {
position: fixed;
right: 0mm;
bottom: 0mm;
left: 0mm;
z-index: 1030;
}
.border-top {
border-top: 1px solid #000;
}
.border-white {
border-color: #fff;
}
Original Answer
After a bit of struggle I have found a work around.
What I did
- defined a named html footer block with the content I want.
- set the footer after the items table using
sethtmlpagefooter
, so that it is in the last page.- added an empty block(
div
) with a height compensating for the height of the footer & required padding between the items table and thesethtmlpagefooter
call.Issues resolved
- when the list items are (less & more) in number it already behaves as expected
- when the list items are in the range which overlaps, instead of the content overlapping the footer- now the empty block overlaps it till the point where the items are just near the footer. so if the items increases the empty block pushes the footer to the next page. If the items increases more it takes up the available space in the previous page as there is no big margins defined
Just documenting here so it may be refferred by anyone having the same issue.