javascript - 如何为 HTML 页面上的所有内部链接自动添加页码？

Question

在打印模式下，我想呈现这样的链接：

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

像这样：

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

（假设目标页面在打印预览中的第 11 页）。

可以使用计数器将页码添加到带有纯 CSS 的页脚，但我可以以更多“我想要的方式”使用它吗？

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

score 4 · Accepted Answer

正如我在我的博文“打印网页”中所写，打印网页处于一种令人遗憾的状态。

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

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

CSS 可以提供很大帮助，但没有浏览器实现必要的部分。请参阅为分页媒体生成的内容模块中的目标计数器- 这正是您需要的。

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

一旦您开始向现有链接添加测试，页码就会开始变化。所以如果你写“blabla（第12页）”，一旦你到达那里，它可能会出现在第13页。

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

为避免移位问题，请在所有链接中添加“(page #0000)”以确保它们占据足够的空间。稍后，它们将被较短的文本替换，因此具有大量链接的页面底部可能会有一些空白区域，但这比替代方案要好。

您应该能够在短短六个月左右的时间内编写类似的东西（并对其进行调试）......

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

score 2 · Accepted Answer

这能行吗？

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

2 回答 2