通过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
设置当元素内部发⽣分页时必须在页⾯顶部保留的最少⾏数。
使⽤⽰例：
js控制滚动条
@media print{
p{orphans:3;widows:2;}
}
6. 控制边距
使⽤⽰例：
@media print{
@page{
margin-top:2cm;
margin-bottom:2cm;
}
}
四、参考⼿册
w3school - CSS 打印属性（Print）：
www.w3school/cssref/index.asp#print
菜鸟教程 - bootstrap 打印类：
www.runoob/bootstrap/bootstrap-responsive-utilities.html

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。