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 相关文章推荐
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 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 第一节 php简介
2012/04/28 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
PHP查询分页的实现代码
2017/06/09 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
Python语言异常处理测试过程解析
2020/01/08 Python
python如何对链表操作
2020/10/10 Python
大学生自我评价怎样写好
2013/10/23 职场文书
一帮一活动总结
2014/05/08 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
挂职个人工作总结
2015/03/05 职场文书
房地产项目合作意向书
2015/05/08 职场文书
德能勤绩工作总结
2015/08/11 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
情况说明书格式及范文
2019/06/24 职场文书