如何計算打印HTML的CSS分頁符？

Question

我正在使用HTML生成報告，我正在使用CSS來控制使用分頁符等的分頁。我已經為用戶提供了一次打印多個報告的選項，我將其創建為單個動態生成的HTML的部分文獻。 將其作為單個文檔使其成為單個打印作業，以避免打印假脫機問題。

我的問題是：我想以“page x of n”格式對較大動態HTML的一部分頁面進行編號。 但是，如果我讓打印機執行此操作，它會將文檔（正確地）視為單個文檔並對整個文檔進行編號。

有什么方法可以確定何時會發生CSS分頁符，所以我可以在打印前將它們計算為一個部分，並將我自己的編號（例如HTML元素）放入長單文檔中的部分中？

似乎應該有一種方法可以讓我這樣做，但是在過去的幾天里，解決方案讓我不知所措，所以我想我會ping Stackoverflow。

更新：我最終做了什么：

我接受了克里斯托弗的回答，因為雖然我沒有完全使用它，但它指出了我正確的方向。

我最終使用jQuery對內容進行了計算，基於打印的紙張大小，邊距，字體大小等，然后為具有CSS用於分頁的分頁符添加元素。 我跟蹤添加了多少分頁符div，然后在處理完所有內容后更新每個分頁符div中的html“page x of n”信息。 這讓我可以避免在開始時知道會有多少頁面（感謝jQuery .each）。

顯然這個解決方案存在一些問題：

1. “頁面x的n”元素不會顯示為真正的頁腳，而是顯示在每個頁面上的內容的底部。 在我的情況下，這是一個可接受的妥協。

2. 拆分內容大於頁面的內容元素，特別是考慮到大部分內容都是由php生成的，有點復雜。 我讓它發揮作用，但同樣，它需要可能打破印刷變化的假設。

3. 計算取決於有關打印紙張大小，邊距，字體大小等的假設。在我在Intranet上運行的情況下，這也是一個可接受的折衷方案，因為我可以控制這些選項。 可以添加附加代碼以處理將來的一些變化（例如紙張尺寸）。

這個解決方案，雖然不完美，有點“脆弱”，解決了我的問題，允許我一次打印多個報告，避免打印機假脫機，跟蹤和重新啟動頁面編號，並避免生成PDF作為打印的中間步驟。

我發現這是一個奇怪的難以破解，所以我仍然會欣賞有關解決方案的意見和建議。

謝謝！

更新2：最終解決方案......自己避免頭痛：

盡管我采用這種方法可能比我應該做的更遠，雖然取得了一些小小的成功，但最終解決方案並不是因為它最終變得太“脆弱”了。 報告格式的任何變化，添加到現有報告中的新內容，紙張大小等都打破了計算，最終導致了大量的額外工作！

那么，最終的解決方案呢？ “抵抗是徒勞的！” 只需將報告作為PDF即可 。 如果你願意，你可以開始“我們告訴你的”合唱，我可以接受;-)

我選擇了TCPDF庫，這個版本非常出色，如果有點難以開始的話。 這些例子非常有用。 現在我對報告進行了完整的自定義，所有內容都按原樣生成。 多個報告很容易創建為單個PDF（防止打印假脫機問題），頁面組允許編號完全按照我的需要工作。

所以，如果你想做這樣的事情，我會建議你切入追逐，跳過HTML / CSS類型報告的挫折，並做PDF。

Answer 1

這將顯示頁碼，但不顯示總頁數：

footer {
    position:fixed;
    bottom:0;
    left:0;
}

body {
    counter-reset: page_number;
}

#page-number:after {
    counter-increment: page_number;
    content: "Page " counter(page_number);
}

有類似的東西

<p id='page-number'></p>

在頁腳中。

瀏覽器：Firefox 19.0.2

Answer 2

我假設您在每個報告的末尾放置一個CSS分頁符，而不是在每個頁面的末尾手動放置。 所以你的問題是知道什么時候在一個長HTML文檔中自然會發生分頁。 答案是 - 你做不到。 即使您知道頁面中有多少行適合（例如），您也只能知道給定頁面大小和打印設置。 如果有人決定在法律文件上打印200％的法律報告，那么你的文件永遠不會知道。 在我看來，你的選擇是1）猜測或2）不要擔心它。

Answer 3

我已經能夠使用wkhtmltopdf在創建用於打印的PDF時實現分頁符。 雖然我不確定我的解決方案是否與非webkit瀏覽器兼容，但我確定如果需要，你可以獲得所有broswers的供應商前綴。

繼承人我做了什么，使用page-break-inside: avoid; ＆ page-break-after: always;

然后使用jquery我計算了我的部分的高度並計算（如果頁面大小將是a4）休息發生了多少次，並使用jquery和pdf頁腳動態編號頁面（在創建pdf之前）所以當用戶下載了正確編號的pdf。

我建議的是設置頁面（作為打印樣式表），以便在頁面的這些高度可以看到頁碼，也許使用絕對定位。

但我不認為這是安全的。

給他們一個PDF打印，然后你有更多的控制，不必擔心網頁打印樣式表，只要PDF下載鏈接顯着顯示。

Answer 4

您不能計算分頁符，但您可以計算分欄符，其行為非常相似。

無論您何處有分頁符樣式，請將它們與匹配的列分隔符對齊：

-webkit-column-break-inside: avoid;
-webkit-break-inside: avoid;

然后將報表設置為使用與打印頁面大小匹配的列：

.page.precalc {
    width: 16800mm;
    height: 257mm;
    -webkit-column-width: 168mm;
    .content {
        width: 168mm;
    }
}

分欄符與分頁符非常相似，因此您只需通過測量水平位置即可確定元素的頁碼。

var left = el.getBoundingClientRect().left;
pageNumber = Math.round(left/635) + 1

CSS列仍然有點支持，因此可能無法正確打印。 但是，您可以在完成布局計算后立即刪除.precalc樣式，以便視圖將返回到原始垂直布局。 根據用例，屏幕/打印介質查詢也可以使用。

以上內容適用於我使用phantomjs生成目錄。 讓它在用戶控制的任意瀏覽器中工作有點復雜。

Answer 5

以下代碼片段將產生; 頁面上每個h2之前的打印分頁h2 。

從這里提取

<style type="text/css">
  h2 {
    page-break-before: always;
  }
</style>