Javascript打印网页局部的实现方案
项目中，需要对页面的部分div进行打印，为了保证界面布局不乱，采取了新建iframe的方法。
将需要打印的div放到iframe中，然后调用iframe进行打印，就可以很好的实现局部打印的效果了。
同时兼容性还很好，以下是我实现的代码，前端小鸟，大神有指点的，请留言赐教哈，提前感谢！
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>test</title> 7 </head> 8 9 <body> 10 <div id="testDive"> 11 <div style="margin: 0 auto;width: 400px; color: red;"> 12 <p>每个表格由 table 标签开始。</p> 13 <p>每个表格行由 tr 标签开始。</p> 14 <p>每个表格数据由 td 标签开始。</p> 15 <h4>一列：</h4> 16 <table border="1" style="color: blue;"> 17 <tr> 18 <td>100</td> 19 </tr> 20 </table> 21 <h4>一行三列：</h4> 22 <table border="1"> 23 <tr> 24 <td>100</td> 25 <td>200</td> 26 <td>300</td> 27 </tr> 28 </table> 29 <h4>两行三列：</h4> 30 <table border="1"> 31 <tr> 32 <td>100</td> 33 <td>200</td> 34 <td>300</td> 35 </tr> 36 <tr> 37 <td>400</td> 38 <td>500</td> 39 <td>600</td> 40 </tr> 41 </table> 42 </div> 43 </div> 44 <button id="printBtn">print</button> 45 <script type="text/javascript" src="index.js"></script> 46 </body> 47 <script type="text/javascript"> 48 window.onload = function() { 49 document.getElementById('printBtn').onclick = function(e) { 50 if (e.preventDefault) { 51 e.preventDefault(); 52 } else { 53 window.event.returnValue = false; 54 } 55 56 var iframeNode = document.getElementById('printWindow'); 57 if (iframeNode) { 58 window.document.body.removeChild(iframeNode); // 原本是放在最后的，但是IE会因为remove掉了而无法打开打印窗口，所以先放在这里了，防止多次创建 59 } 60 61 var iframe = parent.document.createElement('iframe'); 62 iframe.id = 'printWindow'; 63 iframe.style.display = 'none'; 64 window.document.body.appendChild(iframe); 65 66 iframeNode = document.getElementById('printWindow'); 67 68 var div = parent.document.createElement('div'); 69 div.innerHTML = document.getElementById('testDive').innerHTML; 70 iframeNode.contentDocument.body.appendChild(div); 71 72 // 针对win7IE做的调整，win7IE的iframe会打印整个页面 73 if (isIE) { 74 let newWindow = window.open("", "", "toolbar=no, enubar=no"); 75 newWindow.document.body.innerHTML = div.innerHTML; 76 newWindow.print(); 77 }else{ 78 iframeNode.contentWindow.print(); 79 } 80 }; 81 } 82 </script> 83 </html>
