多页 DOMPDF 发票答案

【问题标题】：DOMPDF invoices with multiple pages多页 DOMPDF 发票
【发布时间】：2013-08-10 08:19:47
【问题描述】：

我正在使用 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>

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

【问题讨论】：

无法将其可视化，您可以发布一个示例 HTML 文档吗？
我添加了一个视觉辅助工具，可以帮助您查看总体情况。
页脚在页面上的位置是否重要？ IE。它应该在内容之后，还是在页面底部而不管内容有多远？
另外，是的，min-height 现在不起作用。

标签： php dompdf

【解决方案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 页发票页面时，PDF 的渲染下载非常慢。我可以知道如何改善加载时间吗？
另外，一旦我下载了 pdf 格式的发票，对齐方式都是错误的，并且看起来不像我在视图文件中所做的那样。我的发票只是使用一些引导表和一些样式。
@LordJesus 您应该继续并开始一个新问题（理想情况下，每个问题一个）。如果不求助于讨论，就很难在 cmets 中获得足够的细节，而这并不是 StackOverflow 的真正用途。
我相信我有。看看这篇文章：stackoverflow.com/questions/60832542/…

【解决方案2】：

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

【讨论】：

这是一个很好的观点。在过去的 8 年里我没有接触过这个，但我认为这是一个需要考虑的重要点。如果我今天要这样做，我会尝试使用 flexbox（如果支持），但我肯定会按照您的建议去做并坚持使用 div。感谢您的意见，可能会帮助别人！