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: 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 {
    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 样式
MDN: @page
CSS print 样式
css @page规则控制打印设置选项
打印样式设计