iT邦幫忙

14

其實Css的內心還住著一位Print

紅棗 2018-08-17 21:30:2536503 瀏覽

一、真實案例

聽說網頁按右鍵就可以列印了?

圖片介紹

但簡直就像卸了妝一樣 , 慘不忍睹啊!!!

圖片介紹

二、那位來至邊緣地帶的Print

小明:欸 , P....? , 那個新來的 , 來幫我看一下這個問題.

Print:其實我已經來這十幾年了 , 還時常中午幫你買便當....

小明:為什麼列印的時候 , 樣式都不見了?((無視

Print:因為沒另外寫列印的樣式啊.

小明:蛤?

Print:先來看看這個範例 , 你覺得按列印會印出什麼呢?

圖片介紹

小明:就那個畫面啊 , 三歲小孩都知道.

Print:不不不 , 人家是有封面的.

圖片介紹

小明:為啥?愚人節喔?

Print:那是昨天啦 , 你知道display:none;是什麼嗎?

小明:讓元素不出現在畫面啊 .

Print:對 , 所以列印時 , 我們也可以把網頁的一些元素設定none.

小明:可是那個封面 , 網頁也沒顯示啊.

Print:一樣意思啊 , 沒列印時 , 就設定none啊.

小明: 聽謀啦 , 給個範例是否?

Print:噢 , 你看看這個網頁的結構 , 上面是web頁面結構 , 而下面是一個列印時才會用到的模板 .

圖片介紹

Print:再來看看這兩個scss檔案 , 左邊是專門寫給列印時用的 , 而右邊則是寫給瀏覽網頁時用的.

圖片介紹

Print: 所以只要加上.no-print的元素 , 在列印時就會display:none; , 而模板的顯示和隱藏也是一樣方式 .

小明:那上面那個 @page { ... } 是什麼呀?

Print:就跟word設定邊界一樣意思 , 來看看這圖.

圖片介紹

Print:你也可以指定大小和印直式/橫式的設定, 像是 @page { size: A4 portrait; } (直式的A4大小).

小明:等等 , 你 scss 的 margin 是設定0啊?

Print:因為還有要另外做頁碼 , 而因為定位不能定到margin , 所以改換成各頁面自己設定padding.

小明:不是有什麼頁碼再搭配 @bottom-left, @bottom-center ... 那些嗎?

Print:那些在常用的瀏覽器中已經不能使用了 , 另外頁碼在@page{...}裡面 , 也已經失效很久了.

=> https://stackoverflow.com/a/20317775/5570967

Print:那你知道『列印樣式要寫在 @media print {...} 』和 『設定 大小/方向/邊界 是寫在@page{...} 』了嗎?

小明:嗯...略懂略懂.

Print:現在你再弄懂兩件事 , 大該可以開始寫列印樣式了.

小明:那我可以不要懂嗎... , 沒事 沒事 你繼續.

Print:問個問題 , 你覺得我是像做網頁那樣 , 一頁一頁做的嗎 ?

小明:別以為我會回答不是 , 怎麼看都是一頁一頁的 .

Print:錯了 , 其實只有一頁 .

Print:先看看這張對照圖 , 其實在列印時 , 我們把其他元素都none了 , 所以 裡面只剩下了那個列印模板結構.

圖片介紹

Print:然後看到第二層主要是有三種區塊 , 頁尾 / 封面 / 表格頁 (多頁).

Print:頁尾 .print-footer 其實就是用到像 web 一樣的 fixed 的效果.

Print:然後封面和表格頁的『大小』和『換頁』都是套用到 .print-page .

小明:欸~其實我聽不懂啦 , 你還是講中文吧.

Print:假如我們頁面的高度都只設定80%時 , 就會看到第二頁的畫面就會出現在第一頁.

圖片介紹

小明:那要怎麼辦呢? 放棄治療嗎?

Print:這裡有兩種解決的方式.

Print:第一種是我們可能避免不了有時頁面的height是不足100%的, 但至少可以設定表格不要被切開.

Print:所以可以使用 page-break-inside:avoid; , 就會向下圖一樣效果 ,

圖片介紹

小明:那第二種呢?

Print:第二種就像這個範例一樣 , 我們做了一個模板 , 而且知道每一頁是怎麼換頁的.

Print:就可以下圖一樣 , 就算是高度不到100% , 也可以自訂換頁.

圖片介紹

Print:而這個是在元素後進行換頁 , 相對的也有在元素前換頁 page-break-before:always.

Print:那你知道 『區塊與列印高度』、『避免表格被切開』、『自訂換頁』 這三件事了嗎?

小明:阿你不是說兩件事 , 怎麼變三件了?

Print:麥茶啦 , 那不是重點...

小明:其實我有點好奇 , 你那頁碼是怎麼做的?

Print:就定位啊 , 跟網頁一樣.

小明:我說的是數字...

Print:其實css也有類似計數的功能.

圖片介紹

Print:看到我們在body裡面初始了一個 PageNumber (默認0) .

Print:另外在偽元素裡面設定counter-increment 做加1 , 然後可以使用counter(xx)來獲取.

Print:這樣就做出計數器了呀

小明:喔~懂了!!

Print:你還有問題嗎?

小明:有!! 為什麼你的scss裡面有 pt cm 啊? 怎麼從來都沒看過.

Print:那是原本就有的單位呀 , 比較符合列印用的單位 , 你可以看看下面這篇文章.

=> https://www.w3.org/Style/Examples/007/units.en.html

小明:那你其它css的部分不介紹嗎?

Print:其實那些就跟做網頁時一樣的css , 只是剛剛講的那些是比較特別的.

Print:那來整理一下剛剛說到的重點吧!!!

  • 有專門列印時才會生效的css => @media print {...}
  • 可以設定頁面大小/方向/邊界 => @page { size: A4 portrait; margin: 0; }
  • 元素高度與列印頁面高度的關係
  • 避免表格/圖片被斷開 => page-break-inside: avoid;
  • 控制換頁設定 => page-break-after: always;
  • 使用適合列印的單位 => cm mm pt ...

小明:那個...你沒事吧?((拍肩

Print:蛤 , 沒事啊 , 要不拉個椅子繼續聊 , 我最近還學了&^&$#%....

小明:可4我想下班惹....

Demo
GitHub


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
神Q超人
iT邦研究生 5 級 ‧ 2018-08-17 23:03:01

文章的對話內容很有趣XD

Homura iT邦高手 1 級 ‧ 2018-08-18 00:59:26 檢舉

可4我想下班惹..../images/emoticon/emoticon07.gif

紅棗 iT邦新手 4 級 ‧ 2018-08-18 17:20:16 檢舉

/images/emoticon/emoticon25.gif

1
小魚
iT邦大師 1 級 ‧ 2018-08-18 01:01:05

這我倒是沒學過...
/images/emoticon/emoticon32.gif

看更多先前的回應...收起先前的回應...
小魚 iT邦大師 1 級 ‧ 2018-08-18 10:44:08 檢舉

對了我問一下,
SCSS我還沒用過,
這是要安裝什麼嗎?
還是要引入什麼檔案?

Homura iT邦高手 1 級 ‧ 2018-08-18 12:37:46 檢舉
紅棗 iT邦新手 4 級 ‧ 2018-08-18 17:19:23 檢舉

Scss本身不是原生的Css,所以需要再編譯成css後才能引入使用(scss->css),就像是CoffeeScript和TypeScript,瀏覽器看不懂,要再轉成JavaScript那種感覺,而scss的編譯環境或編譯軟體,可以參考樓上大大的連結.

小魚 iT邦大師 1 級 ‧ 2018-08-18 20:25:45 檢舉

感謝,
我再研究看看~
/images/emoticon/emoticon33.gif

0
柯柯
iT邦新手 3 級 ‧ 2020-10-12 14:16:52

想問一下

@media print {
    .printPage {
        margin: 0;
        margin-bottom: 10mm
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}

這是我設定的CSS 如果我第一頁的margin要0
可是第2頁以後的要有margin-top:15mm 的話要怎下寫

補充: 因列印內容會讓使用者 自行輸入 所以不能確定哪邊斷頁

紅棗 iT邦新手 4 級 ‧ 2020-10-12 14:56:14 檢舉

嗨~這邊有兩個思路提供你參考

第一種是直接定義另一個 className 給第一頁使用的,然後使用js加上className,而其它頁就還是使用 printPage。

第二種是用 css 的 :nth-child,就可以去指定第一頁時的樣式。

0
ping1000
iT邦新手 5 級 ‧ 2021-10-06 17:17:58

若是表格遇到分頁的話 可以自動在頁頭及頁尾加上框線嗎?

紅棗 iT邦新手 4 級 ‧ 2021-10-07 13:50:37 檢舉

hi,不太清楚你想呈現畫面是長怎樣。

基本上你可以把 css print 當成一般的 css ,唯一的差別只是 css print 在列印時才生效,所以加框線感覺應該是可行的(?。

例如:底下這個是在列印時,把表格的字都變成黑色。

https://ithelp.ithome.com.tw/upload/images/20211007/20103370qc4THicRDn.png

0
Leo
iT邦新手 5 級 ‧ 2022-06-17 11:45:21

https://ithelp.ithome.com.tw/upload/images/20220617/20149925tSePhMScw0.jpg
我這邊在列印網頁時,遇到header 和 body中資料重疊問題

第一頁顯示一切正常
灰底(header)能夠顯示在最上面
表單的資料如期接續顯示
只是表單的資料比較多
所以跑到了第二頁
而灰底似乎是header的關係導致每頁都會出現

然而在第二頁,header卻壓住了表單(如上圖)
這邊有做了一些功課,試圖使用page-break-inside: avoid、margin-top: 200px 來進行表單與灰底之間的區隔
只是效果不如預期會分開...
然而margin-top在表單未起作用,然而灰底卻起了作用了
嘗試好一陣子後真不曉得該如何調整..

這邊主要是想讓灰底與表單分開,試過很多方式最終卻徒勞..
想請教紅棗大大是否能給予指教!! 感激不盡!!

紅棗 iT邦新手 4 級 ‧ 2022-09-19 01:31:57 檢舉

Hi ~ 抱歉 ~ 信箱自動轉寄失效 ~ 現在才看到這留言:"(

這問題可能是你 header 是用 fixed 做的, fixed 在列印的時候,每頁都會印出來(只有列印才會出現這情況),所以列印的時候,可以改成其他定位方式,或是讓 fixed 失效。

如下:

header css 用到 fixed。
https://ithelp.ithome.com.tw/upload/images/20220919/20103370QatdkPpTla.png

導致列印時,第二頁會重複出現 header。
https://ithelp.ithome.com.tw/upload/images/20220919/20103370rgFyb7E8HI.png

解決方式就是在 print 時,改成其他定位方式。
https://ithelp.ithome.com.tw/upload/images/20220919/20103370bQ7E8EV9GG.png

這樣在列印時,就不會重複出現在第二頁。
https://ithelp.ithome.com.tw/upload/images/20220919/20103370MTFwXNTlO8.png

0
紅棗
iT邦新手 4 級 ‧ 2022-09-19 01:31:01

---回錯地方,請忽略此留言---

0
guesstoo
iT邦新手 5 級 ‧ 2024-03-19 09:41:25

好文好聞,剛好列出大部分我的user需求需要的技巧

我要留言

立即登入留言