前言
在开发中，有时需要实现页面的局部打印功能，不打印页面上不需要的区域，
例如页面：
<div>内容1</div> <div>内容2</div> <div>内容3</div> <div id="toPrint" style="color:red">打印内容</div> <button onclick="print()"> doPrint </button> </body>
如果我们仅仅需要打印"打印内容"，三种实现方法如下：
方法一、替换body
代码：
<script type="text/javascript"> function print(){ var bdhtml = window.document.body.innerHTML; var prnhtml = $("#toPrint").html(); window.document.body.innerHTML = prnhtml; window.print(); window.document.body.innerHTML = bdhtml; }; </script>
因为window.print（）这个方法只能打印全部body内容，所以这个方法大体来讲，分四个步骤：
1.获取原有body里面的所有内容
var bdhtml = window.document.body.innerHTML
2.获取待打印内容
var prnhtml = document.getElementById(“toPrint”);
3.将页面body替换为待打印内容并进行打印
window.document.body.innerHTML = prnhtml; window.print();
4.打印完成，恢复原来页面body
window.document.body.innerHTML = bdhtml;
总结：
- 优点：
这个方法不依赖于任何第三方插件，响应速度快 - 缺点：
1、替换过程会改变原页面显示效果，影响用户体验。
2、body来回替换的过程中，如果原页面中有较为复杂的js渲染效果，可能会受影响
方法二：jquery.PrintArea.js局部打印 步骤：
步骤
1.下载jquery.PrintArea.js
jquery.PrintArea.js下载地址：点击下载
2.引入jq ，引入jquery.PrintArea.js（注意顺序问题）
因为PrintArea依赖于jquery库，所以一定先引jquery。
<script language="javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery.PrintArea.js"></script>
4.html部分：
<div id="printShow"> //要打印的区域 </div> <input type="button" id="printBtn"/>
5.js
$("#printBtn").click(function(){ $(".printShow").printArea(); });
总结：
- 缺点：
依赖于第三方插件 - 优点：
对原页面不会有任何影响，并且逻辑简单。
ps： PrintArea还提供一些打印时的附加优化功能，例如：
1.mode：模式，当点击打印按钮时触发模式，默认为iframe，当设置为popup则会新开一个窗口页面打印。
2.popTitle：设置新开窗口的标题，默认为空。 3.popClose：完成打印后是否关闭窗口，默认为false。 具体可参考官方API
方法三、css控制
如果不想用上面介绍的jq的那个插件，那直接简单粗暴的用css控制打印的样式吧
代码
@media print { //这里是打印的样式，将不需要打印出来的盒子直接用display:none;隐藏就好了。 }
或者用link引入，后面加 media="print"属性打印样式就用这里面的css控制了。
打印可能碰到的的问题：
table表格打印，一页没放下，内容要到第二页去，不作处理会出现这种情况。
解决办法：
@media print { td,tr{ page-break-inside: avoid;} //用于设置是否在指定元素中插入分页，avoid 避免在元素内部插入分页符。 }
想让特定的某个div在新的一页
<button onclick="printFun()">打印</button> <div style="page-break-after:always">我是封面</div> <div style="page-break-after:always">我是目录，你不知道我的内容有多长</div> <div>我是正文，我需要从一个新页面开始展示</div> <script> function printFun() { window.print(); } </script>
这样，封面，目录和正文分别在打印预览的下一页了。
page-break-after:always; //设置在表格元素之后始终进行分页的分页行为：
page-break-after:avoid; //避免在元素后插入分页符
page-break-before 和page-break-after一样的用法， 元素在指定元素前添加分页符。
