当 TABLE 跨越多个页面时，如何使第一页上的 TFOOT 显示“继续...”？

Posted 2023-03-06

【中文标题】当 TABLE 跨越多个页面时，如何使第一页上的 TFOOT 显示“继续...”？

【英文标题】：When a TABLE spans multiple pages, how can I make the TFOOT on the first page say "continued..."?

【发布时间】：2020-04-25 01:01:04

【问题描述】：

在一个由模板引擎构建的 html 文档中，我有一个会计数据表——行数不定，底部有一个“总计”。有时该表会溢出到另一页。当它这样做时，对于用户来说，另一个页面上还有更多数据并不明显，除非他正在寻找总数并且找不到它。

所以，我将总行放在TFOOT 中，这样它就会打印在每一页上。即使用户漏掉了一些订单项，他也可以在报告的第一页看到总权利。

我想做的不是打印总数，而是在第一页的底部打印类似“（接下页）”的内容（TFOOT 由浏览器动态插入）并具有总计行仅打印在表格跨越的最后一页上。

是否可以使用 HTML、CSS 或 Javascript 在多页表格跨越的每个页面的末尾插入“（续...）”消息？ p>

【问题讨论】：

只是检查：当您说表格溢出到另一个页面时，您所说的“页面”究竟是什么意思？你的意思是表格有一定数量的可见行和分页系统？

【参考方案1】：

不，据我所知这是不可能的，至少不能仅使用 CSS。

直观地说，解决方案可能是这样的：

@media print 
  tfoot:not(:last-child) span::after 
    content: "\2014 continued\2026";
  

<table>
  <tfoot>
    <tr>
      <th><span>Footer</span></th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td><span>A</span></td>
    </tr>
  </tbody>
</table>

但即使在打印包含 <table> 的 HTML 页面太长而无法在单个页面上放置时，它也会分布在多个页面上，并且每个页面上都会重复 <tfoot>（和/或 <thead>） . HTML 文档中仍然只有一个实际的<tfoot> 元素，据我所知，CSS 不允许选择特定的出现。因此，只能修改所有的重复（而不是在我们的例子中，除了最后一个之外的所有）。

【参考方案2】：

如果您知道数据表，这是可能的。数据表是您页面的一个 jquery 插件，它将插入分页和您的模板/表包含的页面总数。这将有助于用户正确了解您拥有多少条记录。最后一行使用 colspan，您可以随时显示总数。您将能够显示总记录数，而不是插入“继续..”。

请查看数据表文档以供参考：https://datatables.net/

【参考方案3】：

您是否尝试过使用onbeforeprint？ 根据MDN：

...这些事件在打印对话框窗口打开之前引发... 允许页面在打印开始前更改其内容...

所以像这样一般的东西应该可以工作：

window.onbeforeprint = (event) => 
  const footers = document.querySelectorAll('tfoot');
  for (var i=0; i < footers.length; i++) 
    footers[i].innerHTML = 'continue...';
  
  document.querySelector('table:last-of-type tfoot').innerHTML = 'last one';  
;

<h1>Hit conrtol+p or any other method for printing</h1>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>
<table><tfoot></tfoot></table>

【讨论】：

投反对票的人能解释一下原因吗？似乎它实际上按照OP的要求找到了每个tfoot，更改了内容（使用可以切换到任何其他方法的innerHTML）并将最后一个更改为其他内容（OP没有放他的代码，所以我放了一些通用字符串）。

原来的问题是关于一张长表分布在多页上，所以有一个<tfoot>多次显示。此答案基于多个表。

@sinoroc 我以为 OP 说他在每个页面上都显示了相同的字符串（“total... etc”）tfoot，他想将其更改为“继续”...

是的，这是在打印 HTML 页面时自动发生的事情。如果单个<table> 分布在多个页面上，则<tfoot> 和<thead> 在每个页面上重复。所以 HTML 文档中只有一个，但它们出现了多次。据我所知，CSS 不允许选择特定的重复项，因此只能修改所有重复项（在我们的例子中，除了最后一个重复项之外的所有重复项）。

【参考方案4】：

您可以先创建一个包含您的打印样式的媒体查询，然后使用content 添加“（继续...）”消息。

@media print 
  tfoot::after 
    content: " continued...";
  

当然，困难的部分是在最后一页将其删除。您可以使用Prince 来完成此操作。具体来说，检查Two-Pass Solution。