CSS 控制打印样式累总。
1、专属样式
CSS 有专属于打印的样式表达,通过媒体查询 @media print{ ... }
表示样式在打印时才起作用,控制打印页面的有 @page { ... }
。
2、页面大小
默认的,size 的默认值为 auto ;
定义页面大小时,可通过 size 调节大小,定义大小同时会去除默认页脚页眉。默认的具有几个尺寸供选择。
- A5 :A5 的规定大小等同于 14.8cm x 21.0cm
- A4 :A4 的规定大小等同于 21.0cm x 29.7cm
- A3 :A3 的规定大小等同于 29.7cm x 42.0cm
- B5 :B5 的规定大小等同于 17.6cm x 25.0cm
- B4 :B4 的规定大小等同于 25.0cm x 35.3cm
- letter :letter 的规定大小等同于信纸大小,常用英尺单位 8.5in x 11in
- legal :legal 的规定大小等同于法律用纸大小,常用英尺单位 8.5in x 11in
- ledger :ledger 的规定大小等同于账簿大小,常用英尺单位 11in x 17in
当然也可以根据需求自定义大小,如
- @page{
- size: A3;
- }
可以写成
- @page{
- size: 29.7cm 42.0cm;
- }
对于默认的给定的尺寸,可以控制页面的横向「landscape」及纵向「portrait」,奇怪的是,对于自定义尺寸的,横纵向的控制是无效的,并且导致样式失效。
正确的写法
- @page{
- size: A3 landscape;
- }
错误的写法
- @page{
- size: 29.7cm 42.0cm landscape;
- }
注:定义页面大小后,无法通过设备再次调节(如谷歌浏览器的打印页面的设置大小将无效)。
3、页面模块
截止目前 CSS 打印模块尚在草案。
4、页面边距
页面边距通过 margin 控制,在 @page 中写 margin ,支持 %,px,cm,mm ... 。
@page 中还有个封面页的概念,可单独对封面页进行操作,用到:first 伪类
如:封面页边距为 6cm ,内容页为 3cm
- @page {
- margin: 3cm;
- }
- @page :first {
- margin: 6cm;
- }
同时还可以操作左侧面「:left」或右侧面「:right」 ,在伪类的操作中,可以控制border、background、margin、padding ,其他的一概不可控。
相对页面从左往右的左侧面生效的边距则为左边距,右侧面生效的为右边距,同理,反向的话,左侧右边距,右侧左边距。
如左侧面边距为3cm,右侧面边距5cm
- @page :left {
- margin: 3cm;
- }
- @page :right {
- margin: 5cm;
- }
5、分页控制
页面有完整的展示的需求,可以通过相应的分页控制来调节。
5.1、page-break-inside
该属性定义相应标签是否要分页,当内容区定义了 avoid 属性,那么就优先不分页。
优先不分页是指两种情况,第一内容区高度小于打印单页面高度,第二内容去高度大于打印单页面高度。
第一种小于的情况,内容区不会分页,如果内容区刚刚在分页中间,那么将会另起一页,如图
第二种大于的情况,内容区仍然会分页,但会在新页面展示,超出新页面的续在新页面往后的页面。
5.2、page-break-before
page-break-before 有几种情况
- auto :默认值,根据情况自动调节分页。
- avoid : 指定内容区页面前面允许有内容。
- always :指定内容区页面前面不允许有内容,即内容区在新页面页头开始展示。
- left :指定内容区页面前面不允许有内容,即内容区在新左页面页头开始展示,
- right :指定内容区页面前面不允许有内容,即内容区在新右页面页头开始展示。
5.3、page-break-after
page-break-after 几种情况与 page-break-before 相反
- auto :默认值,根据情况自动调节分页。
- avoid : 指定内容区页面后面允许有内容。
- always :指定内容区页面后面不允许有内容,即内容区后面内容在新页面页头开始展示。
- left :指定内容区页面后面不允许有内容,即内容区后面内容在新左页面页头开始展示,
- right :指定内容区页面后面不允许有内容,即内容区后面内容在新右页面页头开始展示。
如图,always 情况下,不允许页面内容区「即绿色部分」后面「即红框部分」有内容,留空
6、页面计数
后续补充。
7、页面功能
显式外链,顾名思义给外链在相应链接出显示出来。
如下方代码,内部链接及空链接不显示,外部链接将在打印时显示出来
CSS
- a[href^=http]:after {
- content:" <" attr(href) "> ";
- }
HTML
- 内部链接:<a href="/index.html">链接1</a>
- 外部链接:<a href="http://www.darlang.com">链接2</a>
- 空链接或描点 <a href="#linkThree">链接3</a>
例图:
参考
https://developer.mozilla.org/en-US/docs/Web/CSS/@page
https://www.w3.org/TR/css3-page/#page-selector
https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/