HTML 打印設置頁腳

在 HTML 中，我們可以通過設置頁眉頁腳來控制網頁打印時的顯示效果。尤其是在進行實際的報表輸出等場合，設置好頁眉頁腳可以幫助我們更好地控制打印輸出。

HTML 頁腳設置

HTML 中設置頁腳，可以通過 CSS 樣式來進行控制。在 CSS 中，有一個特殊的屬性@page可以用來定義頁眉頁腳的信息。

@page {
margin: 10mm 20mm 10mm 20mm;
@bottom-center {
content: "頁腳內容";
}
}

上面的代碼是定義了一個頁面大小為 A4 縱向，然后在每個頁面底部中間顯示一個固定的文字“頁腳內容”。另外需要注意的是，這些設置只對打印輸出時的頁面有效，不影響 HTML 頁面本身的顯示和布局。

一些常用的屬性

下面列舉一些在打印設置中比較常見的一些屬性。

@page {
size: A4 landscape;   /* 頁面大小和橫向縱向設置 */
margin: 10mm 20mm 10mm 20mm;   /* 頁面邊距 */
@top-left {
/* 頁眉左上角 */
}
@top-center {
/* 頁眉中間 */
}
@top-right {
/* 頁眉右上角 */
}
@bottom-left {
/* 頁腳左下角 */
}
@bottom-center {
/* 頁腳中間 */
content: "頁腳內容";
}
@bottom-right {
/* 頁腳右下角 */
}
}

總結

通過在 CSS 中設置 @page 屬性，我們可以控制網頁的打印輸出效果，包括頁面大小、頁眉頁腳、邊距等等。這樣我們就可以更好地控制輸出內容，達到需要的展示效果。具體使用時，可以根據實際需要進行設置調整。