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代码：
- A4纸尺寸：
@media print {
@page {
/*A4: 210mm × 297mm，size: 794px × 1123px，0边距*/
/*171.9mm × 258.9mm，size：649px × 978px，19.05mm边距（ie浏览器默认打印边距） */
size: 210mm 297mm;
}
}
- 方向：“portrait” 或 “landscape”。
@page { size: A4 landscape; }
- 页边距：
@page{margin: 2em;}
- 打印分页：
@media print {
/*强制分页*/
.print-page {
page-break-after: always;
}
}
- 避免表格断开：(注：2019年11月20日补充)
@page{
table{
page-break-after: avoid;
}
}
- 避免某行文字断裂：(注：2019年11月20日补充)
@page{
table{
page-break-inside: avoid;
}
}
-
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 样式
