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/
粤公网安备 44010602006221号