Question

在打印模式下，我想渲染这样的链接：

<a href="#targetPage">link</a>

像这样：

<a href="#targetPage">link (page 11)</a>

（假设目标页面位于打印预览中的11.页面上。）

可以使用计数器向页面页脚添加使用纯CSS的页码，但是我可以用“我想要的方式”来使用它吗？

解决方案不需要跨浏览器（FF / Chrome就足够了），允许任何CSS / Javascript技巧。

Answer 1

正如我在博客文章“Printing web pages”中所写，打印网页处于遗憾状态。

除非你只打印（一列）没有图像和表格的文本，否则至少在某种程度上打印出类似于屏幕内容的打印输出已经很难了（是的，我在这里夸大但不多）。

目前最好的打印浏览器仍然是，大约十年以来，Opera。所有其他浏览器或多或少都有吸引力。

CSS可以提供很多帮助，但没有浏览器实现必要的部分。请参阅Target counters in the Generated Content for Paged Media module - 这将完全符合您的需求。

好的，在咆哮之后，这里有一些障碍你需要解决：

一旦开始将测试添加到现有链接，页码就会开始转换。因此，如果你写“blabla（第12页）”，那么一旦你到达那里，它可能会第13页。

为了能够知道哪个页面上的内容，您必须自己将网页拆分为页面。如果你主要是文本，这不是非常难：只需在每页创建一个div，确保浏览器不会在分页符上打印它（祝你好运:-(）然后移动DOM元素进入div，直到它们适合页面...如果你能找到页面大小是什么。

为避免转换问题，请在所有链接中添加“（页面＃0000）”以确保它们占用足够的空间。之后，它们将被替换为较短的文本，因此具有大量链接的页面底部可能会有一些空白区域，但这比替代方案更好。

你应该能在短短六个月左右的时间内编写类似的内容（并进行调试）......

这就是为什么每个人都在服务器上使用渲染引擎，它可以生成HTML，比如PDF输出。 PDF允许您精确控制页面布局。您只需要找到支持文本引用的渲染引擎。我建议LaTeX;它有点笨拙，但它完成了工作。

Answer 2

这可行吗？

@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}