如何使用HTML在文檔的每一個打印頁面上打印頁眉和頁腳？

是否能夠在每一個打印頁面上打印帶有自定義頁眉和頁腳的HTML頁面？

我想在每一個打印頁面的頂部和底部添加大小爲16pt的紅色，Arial字體的「 UNCLASSIFIED」一詞，而無論其內容如何。

爲了說明清楚，若是將文檔打印在5頁上，則每頁應具備自定義的頁眉和頁腳。

有人知道使用HTML / CSS是否可能嗎？

---

#1樓

使用分頁符定義CSS中的樣式：

@media all
  {
  #page-one, .footer, .page-break { display:none; }
  }

@media print
  {
  #page-one, .footer, .page-break   
    { 
    display: block;
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    }
  .page-break
    {
    page-break-before:always;
    } 
}

而後將標記添加到文檔中的適當位置：

<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>

參考文獻

• CSS分頁媒體：分頁符

• MDN：分頁前

• MDN：先入爲主

• 多列布局

• XHTML打印：第二版

• Webkit錯誤5097：CSS2分頁後沒法使用

• 打印HTML常見問題解答：程序會尊重CSS樣式，例如分頁後嗎？

• 打印大型HTML表格時如何處理分頁符

---

#2樓

從這個問題開始 -將如下樣式添加到僅打印樣式表中。 此解決方案將在IE和Firefox中運行，但不能在Chrome （自21版開始）中運行：

#header {
  display: table-header-group;
}

#main {
  display: table-row-group;
}

#footer {
  display: table-footer-group;
}

---

#3樓

這是您只想打印的東西嗎？ 您能夠將其添加到網站上的每一個頁面，而後使用CSS將標記定義爲僅打印介質。

例如，這多是示例標頭：

<span class="printspan">UNCLASSIFIED</span>

而後在CSS中執行如下操做：

<style type="text/css" media="screen">
    .printspan
    {
        display: none;
    }
</style>
<style type="text/css" media="print">
    .printspan
    {
        display: inline;
        font-family: Arial, sans-serif;
        font-size: 16 pt;
        color: red;
    }
</style>

最後，要在每一個頁面上包含頁眉/頁腳，您可使用服務器端包含，或者若是您使用PHP或ASP生成任何頁面，則只需將其編碼到一個通用文件中便可。

編輯：

此答案旨在提供一種在文檔的物理打印版本上顯示某些內容而不會另外顯示的方式。 可是，正如評論所暗示的那樣，當內容溢出時，它不能解決在多個打印頁面上放置頁腳的問題。

若是有幫助，我會留在這裏。

---

#4樓

若是可使用javascipt，請讓客戶端句柄使用javascript佈置內容，以根據可用空間放置元素。

您可使用jquery columnizer插件在固定大小的塊中動態佈置內容，並將頁眉和頁腳定位爲渲染例程的一部分。 http://welcome.totheinter.net/columnizer-jquery-plugin/

參見示例10 http://welcome.totheinter.net/autocolumn/sample10.html

若是在os中啓用，瀏覽器仍會添加本身的頁眉或頁腳。 跨平臺和瀏覽器的一致佈局可能須要有條件的CSS。

---

#5樓

我多年來一直在尋找解決方案，而且找到了有關如何打印可在多個頁面上使用而頁內容沒有重疊的頁腳的文章。

個人要求是IE8，到目前爲止，我發現這在Chrome中不起做用。 [ 更新 ]截至2018年3月1日，它也適用於Chrome瀏覽器

本示例經過設置css樣式來使用表格和tfoot元素：

tfoot {display: table-footer-group;}