其实Css的内心还住着一位Print

一、真实案例

听说网页按右键就可以列印了？

但简直就像卸了妆一样 , 惨不忍睹啊!!!

二、那位来至边缘地带的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