项目中，需要对页面的部分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>

Javascript打印网页局部的实现方案的更多相关文章

  1. 使用JavaScript打印网页指定DIV区域

    JavaScript打印函数myPrint(obj): JavaScript打印页面指定div区域原理:使用window.open()在浏览器打开一个新的页面(window), 使用 window.d ...

  2. JavaScript打印正倒直线

    做了一个作业,用JavaScript打印正倒直线,突然觉得自己还是逻辑有待加强训练啊 document.write("<h3>打印倒正金字塔直线</h3>" ...

  3. 在ASP.NET2.0里打印网页指定的内容（比如打印网页里的一个Table）

    原文:在ASP.NET2.0里打印网页指定的内容(比如打印网页里的一个Table) 打印指定内容: <html> <head> <script   type= " ...

  4. [JS]jQuery,javascript获得网页的高度和宽度

    [JS]jQuery,javascript获得网页的高度和宽度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeigh ...

  5. 将JavaScript 插入网页的方法

    将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的. ...

  6. css去掉使用bootstrap框架后打印网页时预览效果下的超链接

    在我们写网页的时候,超链接是链接各个页面的桥梁,也是搜索引擎爬虫(spider)收录网站页面的关键,因此,在每个网页中会有许多的超链. 今天,一个同行妹妹在使用了bootstrap框架来搭建自己的网站 ...

  7. JavaScript实现网页背景自动变色

    JavaScript实现网页背景自动变色,自己变换颜色,设定时间和颜色值即可,在你设定的颜色值.一定时间内自动切换网页背景颜色. <!DOCTYPE HTML PUBLIC "-//W ...

  8. JQuery或JavaScript获取网页的宽度、高等

    最近多次使用JQery或JavaScript获取网页的宽度或者高度,在网上搜索N久之后发现很多都是粘贴上去并没有详细的介绍,这里我将会对经常使用的一些获取页面宽高的属性,方法做详细的介绍,以便能够更加 ...

  9. asp.net打印网页后自动关闭网页【无需插件】

    项目遇需要网页加载自动打印网页后需要自动关闭该网页,但是百度了好久发现都是需要插件什么的 于是就自己摸索摸索,用js弄了个定时器,意外的发现,当打印设置窗口弹出后,定时器就暂停了 不管你点击取消或者打 ...

随机推荐

  1. PAT——1012. 数字分类

    给定一系列正整数,请按要求对数字进行分类,并输出以下5个数字: A1 = 能被5整除的数字中所有偶数的和: A2 = 将被5除后余1的数字按给出顺序进行交错求和,即计算n1-n2+n3-n4...: ...

  2. 微信小程序，搜索结果关键词高亮 wxml不能动态识别html标签

    wxml中使用rich-text标签放置动态html标签 js:

  3. DB数据源之SpringBoot+MyBatis踏坑过程（五）手动使用Hikari连接池

    DB数据源之SpringBoot+MyBatis踏坑过程(五)手动使用Hikari连接池 liuyuhang原创,未经允许禁止转载  系列目录连接 DB数据源之SpringBoot+Mybatis踏坑 ...

  4. 解决vue变量未渲染前代码显示问题

    在网络加载缓慢或者刷新的时候总会有那么一瞬间出现vue的模板代码,实在很影响美观,对于我这种有强迫症的人来说实在是忍无可忍,后来经过查找资料,终于发现了解决方法,可以使用vue现成的指令来解决这个问题 ...

  5. C++分享笔记：5X5单词字谜游戏设计

    笔者在大学二年级刚学完C++程序设计后,做过一次课程设计,题目是:5X5单词字谜游戏设计.为了设计算法并编写程序,笔者在当时颇费了一番心力,最后还是成功地完成了.设计中不乏有精妙之处.该程序设计完全是 ...

  6. Cobbler实现自动化安装(上)--原理篇

    了解Cobbler之前,我们需要先对PXE及KickStart有一定的认识. PXE PXE(Pre-bootExecution Environment),预启动执行环境,通过网络接口启动计算机,支持 ...

  7. JSON API免费接口 各种提供JSON格式数据返回服务网站的API接口

    这里为大家搜集了一些能够返回JSON格式的服务接口.部分需要用JSONP调用. 电商接口 京东获取单个商品价格接口: http://p.3.cn/prices/mgets?skuIds=J_商品ID& ...

  8. vue2.0 接收url参数

    1) 路由配置传参方式在配置路由时 例如 "/firewall/authorize/:uid/:uname/:token"页面url为 http://XXX.com/firewal ...

  9. 月薪30-50K的大数据工程师们，他们背后是如何学习的

    ​ 这两天小编去了解了下大数据开发相关职位的薪资,主要有hadoop工程师,数据挖掘工程师.大数据算法工程师等,从平均薪资来看,目前大数据相关岗位的月薪均在2万以上,随着项目经验的增长工资会越来越高. ...

  10. 使用GlobalKey启动APP

    按键输入有三种:system key  音量键 global key 按下启动某个APP user key  ABCD... 给安卓应用程序定义一个广播接收者,写一个BroadcastReceiver ...