使用page-break-inside時，在分頁符時添加標題：避免使用CSS或JavaScript還是從瀏覽器中刪除？

Question

我有一個頁面，其中包含具有內部div和內容的div部分。 打印時div的數量從不到一頁到很多頁不等。

我正在使用page-break-inside：避免在每個div分區上使用，以使所有部分都不會打印/拆分為2頁。 （這只是我在firefox上的工作，但還有其他整個故事……。）。

問題是我想在打印時在每個頁面的頂部添加頁眉圖像，但要使用page-break-inside：避免使用css屬性，我不知道在哪里添加頁眉，因為這在打印時有效。

有人知道我能做到嗎？ 我能以某種方式找出分頁符的位置並在其中添加標題嗎？ 還是有一種在瀏覽器中設置標題圖像的方式，例如可以對文檔進行文字處理？

請幫忙謝謝很多里克

Answer 1

無法從JS / HTML / CSS控制打印頁面，因為您無權訪問打印驅動程序，因此您無法知道用戶設置的紙張尺寸或邊距。

為了解決這個問題，您可以使用組件從HTML創建PDF，這樣您就可以更好地控制布局。 那必須在服務器端完成。

Answer 2

我看不到使用CSS2（ spec ）添加標頭信息的任何方式。 有一種使用CSS3將文本添加到“頁面標題”的方法（ link ， spec ）。 我不確定這是否還會涵蓋圖像，但這只是一個開始。 您將需要考慮采用 CSS3，如果它適合您的業務需求（從Wikipedia鏈接看來，只有Opera支持@page選項，但是該信息可能是過時的）。

我認為在格式化打印頁面時，您無法使用javascript將標頭注入到每個頁面上。 我不知道該怎么做（但是我可能錯了）。

您可以做的是定義一個在瀏覽器頁面上不可見但在打印頁面上顯示的div。 這樣的事情應該做到：

<STYLE type="text/css">
@media print {
div.header {display:block;}
}
@media screen {
div.header {display:none;}
}
</STYLE>

然后，您可以在強制分頁符之后放置一個包含標題的div。 這應該為您工作，可能會使用進一步的CSS來迫使該div與頁面頂部對齊，等等。當然，這還要求您使用強制分頁符，這意味着您需要提前知道多少您可以適合頁面的數據，並不理想。

希望這可以幫助。