Question

我正在使用DOMPDF创建发票。我需要的是让发票的内容按照需要在尽可能多的页面上流动，并在发票的底部有总的$ due。

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

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

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

任何解决方案？

修改的

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

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

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

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

具有多个页面的DOMPDF发票

1 个答案: