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; 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>
原文地址:https://www.cnblogs.com/tinyTea/p/9810240.html