通过JS、CSS控制浏览器前端打印功能实现示例

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

一、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 打印类可以快速控制打印区域，通过给特定区域加标签，很容易实现隐藏打印按钮，或者打印附加信息等

class	浏览器	打印机
.visible-print-block .visible-print-inline .visible-print-inline-block	隐藏	可见
.hidden-print	可见	隐藏

三、CSS 打印属性

属性	描述
page-break-after	设置元素后的分页行为。
page-break-before	设置元素前的分页行为。
page-break-inside	设置元素内部的分页行为。
orphans	设置当元素内部发生分页时必须在页面底部保留的最少行数。
widows	设置当元素内部发生分页时必须在页面顶部保留的最少行数。

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