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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 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
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
paypal即时到账php实现代码
2010/11/28 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
基于php权限分配的实现代码
2013/04/28 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
软件工程专业推荐信
2013/10/28 职场文书
毕业生自我鉴定
2013/11/05 职场文书
房地产开发计划书
2014/01/10 职场文书
少年闰土教学反思
2014/02/22 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
干部个人对照检查材料
2014/08/25 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书