网页打印怎么打印快捷键(网页打印怎么打印双面)

前言

web端打印是常见的需求，实际工作中接触较多。这是工作中所用材料的概要。

1.通过媒体查询隐藏元素

通过样式标签内联介绍，或者使用媒体查询media = & # 34打印& # 34；外链样式表然后，隐藏不相关的元素，只显示要打印的内容；这时候需要专门写一套打印样式，页面修改了，打印样式可能也需要修改，维护成本高；

& ltstyle & gt@ media print { } & lt/style & gt；//或者< link rel = & # 34样式表& # 34；media = & # 34打印& # 34；href = & # 34print.css " & gt2.将要打印的元素复制到iframe中需要遍历元素和所有子元素，将dom克隆到新的iframe中，然后在iframe中启动打印。重点是完全照搬风格；jquery . print . js；以这种方式实现对印刷的反应；
示例

这种方案的优点是适用性强，缺点是难以实现。

3.打印页面设置

设置支持@page，也支持伪类:left，:right和:first。

:left设置多页打印的时候偶数页的配置；:right设置多页打印的时候奇数页的配置;:first 设置第一页的配置页面宽度

打印常用A4纸，A4纸的尺寸为21cm×29.7cm，可以使用css中的size属性进行设置。

Size属性设置页面大小和方向:

支持单独设置 A4、A3等 , 默认是纵向支持单独portrait、landscape；纸张大小默认是关键词letter;也支持 A4、A3 和 portrait、landscape关键词组合： A4 landscape；也支持直接设置页面尺寸，比如：21cm 29.7cm，代表页面宽高分别为21cm和29.7cm未设置size属性，可以在打印预览选择纸张大小和方向；设置之后就不能再选择了。

例子

页面的边距margin属性设置页面的边距 : 不支持 em 和 ex;默认的打印会带有页眉页脚。页眉包括日期、title，页脚包括链接和分页等信息。 可以通过 margin 设置边距达到隐藏页眉页脚的目的

@ page { margin:3.7cm 2.6cm 3.5cm；/*上下左右边距*/} @ page:left { margin-left:2.5cm；右边距:2.7cm} @ page:right { margin-left:2.7cm；右边距:2.5cm}@page :first { size: A4纵向；左边距:4cm右边距:4cm}/*隐藏页眉*/@ page { margin-top:0；}/*隐藏页脚*/@ page { margin-bottom:0；}使用绝对物理单位使用绝对单位如pt、mm、cm等。

分页

打印时，如果页面很长，会自动分页。如果想分页而不分离某些元素，可以设置break-inside:avoid for elements；
但是，它可能会留下空白色。

浏览器兼容性firefox不支持size属性可以在打印预览设置纸张和打印方向safari不支持@page可以在打印预览设置纸张和打印方向调启打印预览

window.print()、document . exec command(& # 39；打印’)，右键菜单打印，command+p