CSS @page 列印網頁

通常 CSS 都是設定用瀏覽器觀看的網頁樣式，不過當有列印網頁需求時，這些樣式往往會發生錯位等不如預期的狀況，因此如果有列印需求，除了使用 @media 進行媒體查詢，也可以使用 CSS 的 @page 定義列印網頁時的邊距、直印、橫印、奇數或偶數的頁面設定，這篇教學會介紹 @page 的用法。

快速導覽：

• 認識與使用 @page
• 列印外邊界 margin
• 列印尺寸 size
• 列印方向 page-orientation
• 列印奇數偶數頁面 :first、:left、:right

認識與使用 @page

@page 是 CSS 的 At 規則之一，負責定義列印時的「頁面樣式」，只支援 margin、page-orientation 和 size 這三個與頁面邊界和方向有關的樣式屬性，這些樣式屬性只有在按下「列印網頁」按鈕時，才會透過預覽畫面或印刷的紙張呈現，寫法如下：

@page {
  /* 頁面樣式 */
}

下方範例用瀏覽器開啟時，會有一個滿版的紅色虛線外框 div，但列印時因為有進行 @page 設定，會呈現「水平列印、A3 大小、頁面左側出現 50% 的外邊界」。

線上展示：https://codepen.io/oxxo/pen/ogvPqwy

<div>oxxo</div>

<!-- CSS 程式碼 -->
<style>
  @page {
    margin-left: 50%;      /* 左邊外邊界 50% */
    size: A3 landscape;    /* 尺寸 A3，水平列印 */
  }
  body {
    margin: 0;
    padding: 0;
  }
  div {
    box-sizing: border-box;
    border: 10px dashed #f00;
    width: 100%;
    height: 95vh;
  }
</style>

列印外邊界 margin

@page 所使用的 margin 樣式表示整個頁面的「列印外邊界」，使用方式和單位和元素的「外邊界 margin」完全相同，也支援 margin-left、margin-right、margin-top 和 margin-bottom 等個別外邊界樣式屬性，下方範例使用 margin 設定列印時頁面的外邊界。

參考：外邊界 margin

線上展示：https://codepen.io/oxxo/pen/OPLovge

<div>oxxo</div>

<!-- CSS 程式碼 -->
<style>
  @page {
    margin: 10%;
    margin-left: 30%;
    margin-right: -30%;
  }
  body {
    margin: 0;
    padding: 0;
  }
  div {
    box-sizing: border-box;
    border: 10px dashed #f00;
    width: 100%;
    height: 95vh;
  }
</style>

列印尺寸 size

@page 所使用的 size 樣式表示整個頁面的「尺寸或列印方向」，會使用下方的屬性值互相搭配，可單獨使用方向或尺寸類型單一個值，或方向、尺寸兩個值同時使用。

下方範例開啟並開始列印後，就會使用 A5 尺寸直式列印。

線上展示：https://codepen.io/oxxo/pen/yyBxKoa

<div>oxxo</div>

<!-- CSS 程式碼 -->
<style>
  @page {size: A5 portrait;} /* A5 直印 */
  body {
    margin: 0;
    padding: 0;
  }
  div {
    box-sizing: border-box;
    border: 10px dashed #f00;
    width: 100%;
    height: 95vh;
  }
</style>

列印方向 page-orientation

@page 所使用的 page-orientation 樣式表示整個頁面的「方向」，會使用下方的屬性值互相搭配，可單獨使用方向或尺寸類型單一個值，或方向、尺寸兩個值同時使用。

下方範例開啟並開始列印後，列印時就會呈現逆時針旋轉 90 度的樣貌。

線上展示：https://codepen.io/oxxo/pen/EaYeEvb

<div>APPLE</div>
<div>OXXO</div>

<!-- CSS 程式碼 -->
<style>
  @page {size: A5 portrait;} /* A5 直印 */
  body {
    margin: 0;
    padding: 0;
  }
  div {
    box-sizing: border-box;
    border: 10px dashed #f00;
    width: 100%;
    height: 60vh;
    font-size: 100px;
  }
</style>

列印奇數偶數頁面 :first、:left、:right

@page 所使用的 :first、:left、:right 是一種「虛擬類別」，可以「根據文字方向，取得第一頁、奇數頁或偶數頁」進行樣式設定，下方是這三個虛擬類別的說明：

下方範例開啟並開始列印後，會讓第一頁四周外邊界為 20%，所有偶數頁的左邊外邊界為 30%。

線上展示：https://codepen.io/oxxo/pen/RNbYMZv

<div>apple</div>
<div>banana</div>
<div>orange</div>
<div>oxxo</div>

<!-- CSS 程式碼 -->
<style>
@page :first {margin: 20%;}     /* 第一頁 */
@page :left {margin-left: 30%;} /* 所有偶數頁 */
  body {
    margin: 0;
    padding: 0;
  }
  div {
    box-sizing: border-box;
    border: 10px dashed #f00;
    width: 100%;
    height: 90vh;
    font-size: 100px;
  }
</style>

小結

透過 CSS 的 @page 主要是針對「列印網頁」使用，如果網頁沒有特殊列印需求，基本上完全用不到這個規則定義，但如果想要讓列印時能有更漂亮的版面配置，就可以善用這個規則定義。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～