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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
IE php关于强制下载文件的代码
2008/08/23 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
python操作 hbase 数据的方法
2016/12/18 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
建筑安全生产目标责任书
2014/07/23 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
2015年工程部工作总结
2015/04/30 职场文书
春晚观后感
2015/06/11 职场文书
开学第一周值周总结
2015/07/16 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python
Springboot中如何自动转JSON输出
2022/06/16 Java/Android
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库