js调用iframe实现打印页面内容的方法


Posted in Javascript onMarch 04, 2014

1、程序说明

1) 此程序可以实现选择页面中的区域进行打印,以iframe方式进行打印;
2) 与原生态的print() 区别在于,取消打印页面后可以完整保留当前访问页面的内容。

2、代码部分

1) JS 函数:

function do_print(id_str)//id-str 打印区域的id
{
var el = document.getElementById(id_str);
var iframe = document.createElement('IFRAME');
var doc = null;
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
// 引入打印的专有CSS样式,www.111Cn.net根据实际修改
doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
doc.write('<div>' + el.innerHTML + '</div>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0)
{
     document.body.removeChild(iframe);
}
}

2) HTML:

// 打印区域:
<div id="print_box">
......
</div>
// 调用打印
<button onclick="javascript:do_print('print_box');">打印</button>

3. 测试

点击页面上的打印按钮,即可测试打印;

除了上面方法我们还可以通过jquery来实例,代码如下

<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="jquery.PrintArea.js"></script> 
<script>
$(document).ready(function(){
  $("input#biuuu_button").click(function(){
  $("div#myPrintArea").printArea();
});
});
</script>
<input id="biuuu_button" type="button" value="打印"></input>
<div id="myPrintArea">.....文本打印部分.....</div>

如果要实现区域打印我们可尝试下面方法

下面本文分享一种超简单的方法实现页面的打印功能,不仅可以打印整个页面,还可以打印页面某块区域

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
function printdiv(printpage){
 var headstr="<html><head><title></title></head><body>";
 var footstr="</body>";
 var newstr=document.all.item(printpage).innerHTML;
 var oldstr=document.body.innerHTML;
 document.body.innerHTML=headstr+newstr+footstr;
 window.print(); 
 document.body.innerHTML=oldstr;
 return false;
}
</script>
<title>div print</title>
</head>
<body>
<input type="button" onClick="printdiv('div_print');" value=" 打印 ">
<div id="div_print">
<h1 style="Color:Red">被打印区域:3water.com</h1>
</div>
这块区域是打印不到的!
</body>
</html>
Javascript 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
js逆向解密之网络爬虫
May 30 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
JS开发前端团队展示控制器来为成员引流
Aug 14 Javascript
JavaScript的21条基本知识点
Mar 04 #Javascript
js的2种继承方式详解
Mar 04 #Javascript
Seajs的学习笔记
Mar 04 #Javascript
文本域中换行符的替换示例
Mar 04 #Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 #Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 #Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 #Javascript
You might like
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
PHP 动态随机生成验证码类代码
2010/04/09 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
YII框架常用技巧总结
2019/04/27 PHP
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
python中文编码问题小结
2014/09/28 Python
python中pycurl库的用法实例
2014/09/30 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
使用Python写CUDA程序的方法
2017/03/27 Python
python3爬取数据至mysql的方法
2018/06/26 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Python如何telnet到网络设备
2021/02/18 Python
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
毕业生的求职信范文分享
2013/12/04 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
高三教师工作总结2015
2015/07/21 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技