1

我正在使用 DOMPDF 创建发票。我需要的是根据需要在尽可能多的页面上显示发票流的内容，并在发票底部显示应付的总金额。

我首先尝试使用带有绝对定位页脚的固定高度 div，但显然我的发票详细信息可以扩展到页脚。

我需要的是为我的主 div 设置一个最小高度，并在该 div 的底部为我的页脚添加一个填充，但 min-height 似乎不起作用。

我也尝试将我的整个页面变成一个表格，但我不希望我的表格行分成多个页面（以便将我的所有总数放在同一页面上。）

有什么解决办法吗？

编辑

示例 HTML（绝对定位）：

<div id="main" style="height:10in;width:7in;position:relative;">
    <!-- header is here, all OK -->
    <!-- content, dynamic height -->
    <!-- footer -->
</div>

示例 HTML（表格）：

<table width="100%">
  <tr><!-- header --></tr>
  <tr><!-- content --></tr>
  <tr><!-- footer --></tr>
</table>

页脚永远不应该被拆分，并且在文档的末尾。如果内容填满页面，页脚应位于页面末尾。

4

2 回答 2

1

理想的解决方案是page-break-before: avoid在页脚上使用。这只会在您的场景下提供最小的覆盖范围（即只会拉出一个表格行），但至少页脚不会是单独的。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style>
    div { width: 100%; margin: .25em; }
    span { width: 33%; display: inline-block; }
    div#footer { text-align: right; border-top: 1px solid black; page-break-before: avoid; }
  </style>
</head>
<body>
  <div><span>Count</span><span>Item</span><span>Item Total</span></div>
  <div><span>1</span><span>widget</span><span>X.XX</span></div>
  <div><span>1</span><span>widget</span><span>X.XX</span></div>
  ...
  <div><span>1</span><span>widget</span><span>X.XX</span></div>
  <div><span>1</span><span>widget</span><span>X.XX</span></div>
  <div id="footer">
    <p>Total: X.XX</p>
  </div>

</body>
</html>

不幸的是，page-break-before 在表格上效果不佳。为了在这种情况下提供解决方法，我将从一个假设开始：页脚可以位于页面的最底部，无论内容位于多远。

在这种情况下，您基本上可以解决这个问题，因为 dompdf 处理文档内容的方式有一个怪癖。即，元素在遇到时被渲染。因此，一个固定位置的元素会呈现在从遇到它的页面开始的页面上。它不会出现在以前的页面上。

这是 v0.6.0 之前的一个怪癖，将来可能会改变。

因此，您可以将页脚放置在文档的末尾，position: fixed或者position: absolute使用页边距将页脚移到其中。类似于以下内容：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style>
    @page { margin: 1in; }
    table { width: 100%; }
    div#footer { width: 100%; position: absolute; bottom: -.35in; text-align: right; border-top: 1px solid black; }
  </style>
</head>
<body>
<table>
  <tr><td>Count</td><td>Item</td><td>Item Total</td></tr>
  <tr><td>1</td><td>widget</td><td>X.XX</td></tr>
  <tr><td>1</td><td>widget</td><td>X.XX</td></tr>
  ...
  <tr><td>1</td><td>widget</td><td>X.XX</td></tr>
  <tr><td>1</td><td>widget</td><td>X.XX</td></tr>
</table>

<div id="footer">
  <p>Total: X.XX</p>
</div>

</body>
</html>

使用上面的代码，页脚将始终出现在页面底部的最后一页上。

于 2013-08-14T02:27:30.583 回答
1

要记住的一件事是避免嵌套表格（如果您使用表格布局）。<table>在另一个表中添加<td>会导致许多 pdf 布局问题。所有表格的父级应该是 a<div>或 a<body>并且 DOMPDF 可以正确解释布局。

于 2021-12-03T11:19:00.773 回答