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 相关文章推荐
浅析javascript闭包 实例分析
Dec 25 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
js返回顶部实例分享
Dec 21 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
Typescript3.9 常用新特性一览(推荐)
May 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
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
Python3解释器知识点总结
2019/02/19 Python
python中必要的名词解释
2019/11/20 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
python中time.ctime()实例用法
2021/02/03 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
销售副总经理岗位职责
2013/12/11 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
经典演讲稿开场白
2014/08/25 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
初中优秀学生评语
2014/12/29 职场文书
个人工作表现自我评价
2015/03/06 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
python实现商品进销存管理系统
2022/05/30 Python