css 列印友善列印

友善列印：切版技巧大補帖

王淳藝 Celia Wang 2025/09/22 15:00:00

0 19

每個網頁都有讓使用者列印成紙張的功能，但是在一般列印時，版面在網頁上看起來的精美往往與按下列印後的預覽不同，本篇將介紹關於「友善列印」的做法。

---

一般列印 vs 友善列印

「一般列印」和「友善列印」的差異主要在於輸出的內容與格式

⦿ 一般「列印」：

直接呼叫瀏覽器的列印功能，會把目前頁面完整照搬到列印預覽，包括網站頁首、導覽列、側邊欄、廣告、背景圖片等等。

若版面是多欄、或有複雜排版，可能印出來會很亂，適合使用者臨時要印目前看到的整個頁面，但不保證美觀。

⦿ 「友善列印」：

通常是另外提供一個簡化後的列印專用版本，可能重新排版，只保留標題和主要內容，或是透過 print stylesheet（列印樣式表，@media print），在同一頁面隱藏不必要的元素（如 header、footer、廣告、按鈕）。

目的在於讓輸出的紙本更乾淨、易讀，並減少墨水和紙張浪費，有時還會特別調整字體大小、行距、去掉背景色。

友善列印切版實作

要針對列印時的版面進行 css 的撰寫，筆者建議可以特別將列印的樣式獨立出一個 css 檔案，專門寫列印的樣式，如 print.scss。

接下來便可在 css 中添加內容：

@media print {  /* 列印相關樣式寫這邊 */
    div {
        ...
    }
}

以下就開始介紹幾個常見常用的實用小撇步～

1. 顯示區塊背景色 / 背景圖：因為列印時會隱藏底色，加上這行可讓背景色加回，同時需注意瀏覽器相容性問題

div {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

2. 強制換頁：加入此語法可在元素的前或後強制換頁

div { 
   break-before: page; /* 元素前強制換頁 */
}


div { 
   break-after: page; /* 元素後強制換頁 */
}

3. 自定義頁面尺寸：可自行設定間距與頁面大小

size 後可同時寫版面尺寸與方向，如範例的 A4 表示版面尺寸、landscape 表示為水平呈現，以下介紹幾種方向的設定：

auto 自動 / landscape 橫向 / portrait 縱向

@page {
    size: A4 landscape;
    margin-top: 0;
    margin-left: 2cm;
}

4. 避免元件區塊被截斷：有時一個區塊內容很多，又碰到剛好換頁就會被截斷，加上此語法則可透過直接換頁來避免截斷

*註：若瀏覽器為 safari，則有可能失效

div {
    break-inside: avoid;
}

友善列印效果預覽

寫完所有針對友善列印的設定後，能透過瀏覽器預覽效果是最重要的一步，能檢視是否有跑版或設定失效的部分。

要用瀏覽器模擬列印效果的路徑如下（以 chrome 為例）：

1. 網頁上點選右鍵 → 檢查

2. 右上角 ... → 更多工具 → 算繪

3. 模擬 CSS 媒體類型 -> 下拉選單「列印」

*註：不是對每個網頁做此動作都會看得出頁面變化，若該網頁沒有特別撰寫 print 樣式，則選擇後也不會有反應

這三步就是即時預覽列印 css 畫面的方法，更準確也可以直接使用瀏覽器本身的列印功能，就可在預覽頁看見當前效果。

---

以上就是關於友善列印的介紹，此功能常見於公家機關網頁，下次剛好做到友善列印功能時不妨試試以上設定的小撇步！

參考資料：

https://im1010ioio.hashnode.dev/css-media-print

https://beareatapple.hashnode.dev/css-print-friendly

https://medium.com/@ruby29922026/vue%E7%AD%86%E8%A8%98-%E5%A6%82%E4%BD%95%E8%99%95%E7%90%86%E5%88%97%E5%8D%B0-af21f05c6522

王淳藝 Celia Wang