码迷,mamicode.com
首页 > Windows程序 > 详细

window.print()打印页面指定内容(使用iframe保证原页面不失效)

时间:2017-05-21 12:52:19      阅读:1082      评论:0      收藏:0      [点我收藏+]

标签:添加   打印   btn   type   --   div   func   失效   指定   

使用window.print()时会出现两个问题:

(1)直接使用window.print() 打印的是整页内容-->无法实现打印指定区域

(2)打印时替换body中的内容,打印完成后再替换回来-->这样会导致原来页面事件失效

 使用iframe即可打印指定内容,也可保证页面不失效,具体方法如下:

1、将打印的内容独立出来为一个print.html文件,并为页面添加打印事件

<!DOCTYPE html>
<html>
<head>
   ...
</head>
<body>
    ...打印内容
</body>
<script>
    function iframePrint(){    //添加打印事件
      window.print();
    }
</script>

2、在原页面中使用iframe引入打印页面

<!DOCTYPE html>
...
<iframe src="print.html" frameborder="0" id="printIframe" name="printIframe" ></iframe>
...
<button id="btn">打印</button>
...

3、打印事件绑定,在原页面中调用print.html中的打印事件(为方便表示这里使用jq绑定事件)

$("#btn").on("click",function(){
        document.getElementById(‘printIframe‘).contentWindow.iframePrint();
})

 

至此,点击打印即可实现iframe中内容的打印 ;

 

window.print()打印页面指定内容(使用iframe保证原页面不失效)

标签:添加   打印   btn   type   --   div   func   失效   指定   

原文地址:http://www.cnblogs.com/pangys/p/6879562.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!