打印网页 ( @page )

通常 CSS 都是设定用浏览器观看的网页样式，不过当有打印网页需求时，这些样式往往会发生错位等不如预期的状况，因此如果有打印需求，除了使用 @media 进行媒体查询，也可以使用 CSS 的 @page 定义打印网页时的边距、直印、横印、奇数或偶数的页面设定，这篇教学会介绍 @page 的用法。

快速导览：

• 认识与使用 @page
• 打印外边界 margin
• 打印尺寸 size
• 打印方向 page-orientation
• 打印奇数偶数页面 :first、:left、:right

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

认识与使用 @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 {
    page-orientation: rotate-left; /* 逆時針旋轉 90 度 */
  }
  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 主要是针对“打印网页”使用，如果网页没有特殊打印需求，基本上完全用不到这个规则定义，但如果想要让打印时能有更漂亮的版面配置，就可以善用这个规则定义。

意见反馈