Javascript打印网页局部的实现方案
Javascript打印网页局部的实现方案
就只是小茗
发布于 2018-10-25 17:30:24
发布于 2018-10-25 17:30:24
项目中，需要对页面的部分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">
46 window.onload = function() {
47 document.getElementById('printBtn').onclick = function(e) {
48 if (e.preventDefault) {
49 e.preventDefault();
50 } else {
51 window.event.returnValue == false;
52 }
53
54 var iframeNode = document.getElementById('printWindow');
55 if (iframeNode) {
56 window.document.body.removeChild(iframeNode); // 原本是放在最后的，但是IE会因为remove掉了而无法打开打印窗口，所以先放在这里了，防止多次创建
57 }
58
59 var iframe = parent.document.createElement('iframe');
60 iframe.id = 'printWindow';
61 iframe.style.display = 'none';
62 window.document.body.appendChild(iframe);
63
64 iframeNode = document.getElementById('printWindow');
65
66 var div = parent.document.createElement('div');
67 div.innerHTML = document.getElementById('testDive').innerHTML;
68 iframeNode.contentDocument.body.appendChild(div);
69 iframeNode.contentWindow.print();
70 };
71 }
72 </script>
73 </body>
74
75 </html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-10-18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读