怎么把css改成打印,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实现浏览器打印、打印预览

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

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

需要打印的内容尽量避免float,有些浏览器不会正确的打印浮动的内容。

可以调用window.print()函数来打印当前页面。

参考

作者：恬雅过客

链接：https://www.jianshu.com/p/4943ae92b812