3

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

所以，我把总行放在 a 中TFOOT，所以它会打印在每一页上。即使用户错过了一些行项目，他也可以在报告的第一页看到总权利。

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

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

4

4 回答 4

1

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

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

当然，困难的部分是在最后一页将其删除。您可以使用Prince来完成此操作。具体来说，检查两次通过解决方案。

于 2020-01-14T08:24:25.217 回答
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>

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

于 2020-01-22T14:53:30.750 回答
0

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

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

于 2020-01-20T06:22:49.093 回答
-1

你试过用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>

于 2020-01-20T00:12:20.313 回答