1

我想选择打印页面上的最后一个元素。例如,给定这个 HTML(假设打印页面的高度为 100px):

<!-- other content before -->

<div id="TheThing">
  <section id="a">Some content</section>
  <section id="b">Some content</section>
  <section id="c">This will be the last section on the page</section>
  <section id="d">This section will start on the next page</section>
  <section id="e">This is the last section</section>
</div>

<!-- other content after -->

这个CSS:

#TheThing {
  page-break-before: always;
  page-break-after: always;
}

section {
  height: 30px;
  border-bottom: solid 1px black;
  page-break-inside: avoid;
}

我希望能够选择每个打印页面上的最后一个元素,在这种情况下#c(并且#e,虽然如果有必要,这可以很容易地用 排除:not(:last-child))并删除它的边框。

所需输出的近似值:

期望的输出

目前我正在使用 Prince XML。我不喜欢用它来处理 JavaScript。

可能吗?

4

2 回答 2

2

Prince 的创始人和首席程序员在他们的论坛中表示,如果没有 JavaScript 并通过 Prince 运行文档两次,这是不可能的。对不起 :(

https://www.princexml.com/forum/topic/3672/how-to-select-the-last-tr-element-of-a-page-when-it-breaks

于 2017-09-09T00:27:04.277 回答
0

我不认为这是可以控制的。主要原因是没有“最后一页”之类的东西,因为根据您要打印的纸张,可能会有更多元素,这发生在将 CSS 应用于 HTML 元素之后,并且您的文档没有访问此信息的方式。

但是,如果你 100% 了解自己将使用什么类型的纸张来打印它,比如说 A4,你可以为父元素和子元素设置一个高度,然后使用一个简单的:nth-child()伪选择器,你就可以控制哪个一个来选择应用样式。这是因为您知道 A4 的高度,因此您可以准确预测,假设没有任何会在打印预览页面中添加任何不同的选项(即缩放等)。此外,您可以将此 CSS 放在 中@media print,因此它仅适用于打印页面。

于 2017-09-06T13:47:26.110 回答