在开发中，有时需要实现页面的局部打印功能，不打印页面上不需要的区域，

例如页面：

<div>aaaaaaaaaaaaaaaaaaa</div>

<div>bbbbbbbbbbbbbbbbbbb</div>

<div>ccccccccccccccccccc</div>

<div id="toPrint" style="color:red">ddddddddddddddddddddd</div>

<button  onclick="print()"> doPrint </button>

</body>

dddddddddd需要打印，两种实现方法如下：

方法一、替换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、引入js

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="jquery.PrintArea.js"></script>

因为PrintArea依赖于jquery库，所以一定先引jquery。

2.打印

$("#toPrint").printArea();

总结：

缺点：依赖于第三方插件

优点：对原页面不会有任何影响，并且逻辑简单。

ps：

PrintArea还提供一些打印时的附加优化功能，例如：

1.mode：模式，当点击打印按钮时触发模式，默认为iframe，当设置为popup则会新开一个窗口页面打印。 

2.popTitle：设置新开窗口的标题，默认为空。 

3.popClose：完成打印后是否关闭窗口，默认为false。

具体可参考官方API