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

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 ;它有点笨拙，但可以完成工作。