css 打印print

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实现浏览器打印、打印预览

至于从服务器端着手的方式可自行去搜索相关资料。

其他

1. 对于页面上有显示而不想打印的内容,可以将其display设置为none来避免打印。

2. 需要打印的内容尽量避免float,有些浏览器不会正确的打印浮动的内容。
   可以调用window.print()函数来打印当前页面。

3. 分页打印或换页打印：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规则控制打印设置选项

• 打印样式设计

• Prince官网
  JS实现浏览器打印、打印预览

作者：恬雅过客
链接：https://www.jianshu.com/p/4943ae92b812