如何自動將頁碼添加到HTML頁面上的所有內部鏈接？

Question

在打印模式下，我想渲染這樣的鏈接：

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

像這樣：

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

（假設目標頁面位於打印預覽中的11.頁面上）。

可以使用計數器向頁面頁腳添加使用純CSS的頁碼，但是我可以使用更多“我想要的方式”嗎？

該解決方案不需要跨瀏覽器（FF / Chrome就足夠了），允許任何CSS / Javascript技巧。

Answer 1

正如我在博客文章“ 打印網頁 ”中所寫，打印網頁處於令人遺憾的狀態。

除非你只打印（一列）沒有圖像和表格的文本，否則至少在某種程度上打印出類似於屏幕內容的打印輸出已經很難了（是的，我在這里誇大但不多）。

目前最好的打印瀏覽器仍然是，大約十年，Opera。 所有其他瀏覽器或多或少都會吸引人。

CSS可以提供很多幫助，但沒有瀏覽器實現必要的部分。 請參閱“ 為分頁媒體生成的內容”模塊中的目標計數器 - 這將完全符合您的需要。

好吧，在咆哮之后，這里有一些你需要解決的障礙：

一旦開始將測試添加到現有鏈接，頁碼就會開始轉換。 因此，如果你寫“blabla（第12頁）”，那么一旦你到達那里，它可能會第13頁。

為了能夠知道哪些頁面上的內容，您必須自己將網頁拆分為頁面。 如果你主要是文本，這並不是非常難：只需在每頁創建一個div ，確保瀏覽器不會在分頁符上打印它（祝你好運:-(）然后將DOM元素移到div直到它們適合頁面...如果你能找到頁面大小是什么。

要避免轉換問題，請在所有鏈接中添加“（頁面＃0000）”以確保它們占用足夠的空間。 之后，它們將被替換為較短的文本，因此具有大量鏈接的頁面可能在底部有一些空白空間，但這比替代方案更好。

你應該能在短短六個月左右的時間里寫出類似的內容（並進行調試）......

這就是為什么每個人都在服務器上使用渲染引擎，它可以生成HTML，比如PDF輸出。 PDF允許您精確控制頁面布局。 您只需要找到支持文本引用的渲染引擎。 我建議LaTeX ; 它有點笨拙，但它完成了工作。

Answer 2

這可行嗎？

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