zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Android — Camera聚焦流程
    Camera.Parameters 参数
    Android 中的 Service 全面总结
    android中Camera setDisplayOrientation使用
    Android动画学习笔记-Android Animation
    mediaplayer与surfaceView,无法播放问题
    android错误之MediaPlayer用法的Media Player called in state *,androidmediaplayer
    转:Android应用开发性能优化完全分析
    Android开发者指南(9) —— ProGuard
    计算机科学图书待读
  • 原文地址:https://www.cnblogs.com/tinyTea/p/9810240.html
Copyright © 2011-2022 走看看