Javascript打印网页局部的实现方案

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

项目中，需要对页面的部分div进行打印，为了保证界面布局不乱，采取了新建iframe的方法。

将需要打印的div放到iframe中，然后调用iframe进行打印，就可以很好的实现局部打印的效果了。

同时兼容性还很好，以下是我实现的代码，前端小鸟，大神有指点的，请留言赐教哈，提前感谢！

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>test</title>

 </head>

 <body>

     <div id="testDive">

         <div style="margin: 0 auto;width: 400px; color: red;">

             <p>每个表格由 table 标签开始。</p>

             <p>每个表格行由 tr 标签开始。</p>

             <p>每个表格数据由 td 标签开始。</p>

             <h4>一列：</h4>

             <table border="1" style="color: blue;">

                 <tr>

                     <td>100</td>

                 </tr>

             </table>

             <h4>一行三列：</h4>

             <table border="1">

                 <tr>

                     <td>100</td>

                     <td>200</td>

                     <td>300</td>

                 </tr>

             </table>

             <h4>两行三列：</h4>

             <table border="1">

                 <tr>

                     <td>100</td>

                     <td>200</td>

                     <td>300</td>

                 </tr>

                 <tr>

                     <td>400</td>

                     <td>500</td>

                     <td>600</td>

                 </tr>

             </table>

         </div>

     </div>

     <button id="printBtn">print</button>

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

 </body>

 <script type="text/javascript">

     window.onload = function() {

         document.getElementById('printBtn').onclick = function(e) {

             if (e.preventDefault) {

                 e.preventDefault();

             } else {

                 window.event.returnValue = false;

             }

             var iframeNode = document.getElementById('printWindow');

             if (iframeNode) {

                 window.document.body.removeChild(iframeNode); // 原本是放在最后的，但是IE会因为remove掉了而无法打开打印窗口，所以先放在这里了，防止多次创建

             }

             var iframe = parent.document.createElement('iframe');

             iframe.id = 'printWindow';

             iframe.style.display = 'none';

             window.document.body.appendChild(iframe);

             iframeNode = document.getElementById('printWindow');

             var div = parent.document.createElement('div');

             div.innerHTML = document.getElementById('testDive').innerHTML;

             iframeNode.contentDocument.body.appendChild(div);

             // 针对win7IE做的调整，win7IE的iframe会打印整个页面

             if (isIE) {

                 let newWindow = window.open("", "", "toolbar=no, enubar=no");

                 newWindow.document.body.innerHTML = div.innerHTML;

                 newWindow.print();

             }else{

                 iframeNode.contentWindow.print();

             }

         };

     }

 </script>

 </html>