css打印的基本设置
打印页面的一些属性,包括纸张尺寸，方向，页边距，分页，页眉，页脚，水印等等特性，大多数可以通过@page的规则来设置。
度量单位
显示时一般使用px,em或pt等逻辑单位,但在打印时要使用物理单位,比如cm或in(英寸)。对于常见的DPI(Dot Per Inch)为96的screen,px与cm的换算关系如下：
1 inch = 2.54 cm
1cm = 96/2.54 ≈ 37.80 px
1px = 2.54/96 ≈ 0.0265 cm
100px = 2.65 cm
A4纸的标准尺寸为:
21.0cm * 29.7 cm
在96DPI分辨率下,其对应的像素尺寸大约为:
794px * 1123px
因为不同的DPI下,其对应的像素尺寸是不同的,所以才要使用print css,使用物理单位来描述要打印的页面,这样打印效果就会一致了。
css代码：
@media print {
@page { /*A4: 210mm × 297mm*/
size: 195mm 275mm; /* or size: A4; or size: 794px 1123px; */
}
}方向：“portrait” 或 “landscape”。
@page { size: A4 landscape; }
页边距：
@page{margin: 2em;}
分页：
@media print { /*强制分页*/
.print-page {
page-break-after: always;
}
p {
page-break-after: always;
}
}orphans设置当元素内部发生分页时必须在页面底部保留的最少行数。
widows设置当元素内部发生分页时必须在页面顶部保留的最少行数。
比如:
@media print {
p {
widows: 2;/*顶部2行*/
orphans: 3; /*底部3行*/
}
}至于页眉页脚的设置，css的方式可以参考此文打印样式设计，只是需要调用三方的Prince。js的方式，目前就发现Webbrowser控件方式（ie10以下才行），可参考此文JS实现浏览器打印、打印预览
至于从服务器端着手的方式可自行去搜索相关资料。
其他
对于页面上有显示而不想打印的内容,可以将其display设置为none来避免打印。
需要打印的内容尽量避免float,有些浏览器不会正确的打印浮动的内容。
可以调用window.print()函数来打印当前页面。分页打印或换页打印：page- break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。每个打印属性都可以设定4种设定值：auto、always、left和 right。
相关参数说明可以参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/page-break-after或https://developer.mozilla.org/zh-CN/docs/Web/CSS/page-break-before或 CSS print 样式
参考
作者：恬雅过客
链接：https://www.jianshu.com/p/4943ae92b812
随时随地看视频
