前端控制打印有些细节需要注意：分页、隐藏打印按钮、页面边距、页面方向等，本文一一道来

文章目录

• 一、JS 调用示例
• • 1. 打印整个页面
  • 2. jQuery 打印局部
• 二、Bootstrap 打印类
• 三、CSS 打印属性
• • 1. page-break-before
  • 2. page-break-after
  • 3. page-break-inside
  • 4. orphans
  • 5. widows
  • 6. 控制边距
• 四、参考手册

一、JS 调用示例

1. 打印整个页面

<input type="button" class="hidden-print" value="一键打印" onclick="window.print()" />

2. jQuery 打印局部

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>    
<script type="text/javascript" src="jquery.PrintArea.js"></script>    
<script>  
$(function(){    
  $("#btnPrint").click(function(){    
      $("div#myPrintArea").printArea();   
    });   
});   

</script>

二、Bootstrap 打印类

Bootstrap 打印类可以快速控制打印区域，通过给特定区域加标签，很容易实现隐藏打印按钮，或者打印附加信息等

三、CSS 打印属性

1. page-break-before

用于设置元素前面的分页行为,可取值:

• auto默认值。如果必要则在元素前插入分页符。
• always在元素前插入分页符。
• avoid避免在元素前插入分页符。
• left在元素之前足够的分页符，一直到一张空白的左页为止。
• right在元素之前足够的分页符，一直到一张空白的右页为止。
• inherit规定应该从父元素继承 page-break-before 属性的设置。

2. page-break-after

设置元素后的分页行为。取值与page-break-before一样。

3. page-break-inside

设置元素内部的分页行为。取值如下:

• auto默认。如果必要则在元素内部插入分页符。
• avoid避免在元素内部插入分页符。
• inherit规定应该从父元素继承 page-break-inside 属性的设置。
• 使用示例：

@media print { 
	section { page-break-before: always;}
	h1 { page-break-after: always;}
	p { page-break-inside: avoid;}
}

4. orphans

设置当元素内部发生分页时必须在页面底部保留的最少行数。

5. widows

设置当元素内部发生分页时必须在页面顶部保留的最少行数。

• 使用示例：

@media print { 
	p { orphans:3; widows:2;}
}

6. 控制边距

• 使用示例：

@media print { 
	@page { 
		margin-top:2cm;
		margin-bottom:2cm;
	}
}

四、参考手册

• w3school – CSS 打印属性（Print）：
• https://www.w3school.com.cn/cssref/index.asp#print
• 菜鸟教程 – bootstrap 打印类：
• https://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html