首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

web 页面分页打印的实现

Posted in Javascript onJune 22, 2009

1．首先引入一个WebBrowser在需要打印的页面，可以直接添加： 

<object id="WebBrowser" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" width="0"> 
</object>

到页面，或者使用JavaScript在需要的时候临时添加也可以： 
document.body.insertAdjacentHTML("beforeEnd", 
"<object id=\"WebBrowser\" width=0 height=0 \ 
classid=\"clsid:8856F961-340A-11D0-A96B-00C04FD705A2\">");

2 .页面设置和打印预览
如下所示，直接调用即可 
document.all.WebBrowser.ExecWB(6,6) 直接打印 
document.all.WebBrowser.ExecWB(8,1) 页面设置 
document.all.WebBrowser.ExecWB(7,1) 打印预览

或者： 
execScript("document.all.WebBrowser.ExecWB 7, 1","VBScript");

3 隐藏不打印的页面元素和分页
CSS 有个Media 属性，可以分开设置打印和显示的格式。
如 <style media="print" type="text/css"> …</style> 中间的格式将只在打印时起作用，不会影响显示界面。
所以可以设定
<style media="print" type="text/css">
.Noprint{display:none;}
.PageNext{page-break-after: always;}
</style>
然后给不想打印的页面元素添加： class="Noprint" ，那就不会出现在打印和打印预览中了。
想分页的地方添加： <div class="PageNext"></div> 就可以了。
4．打印页面的特定部分
通过将需要打印的特定部分另建一个页面，然后装入主页面的一个IFrame中，再调用IFrame的打印方法，只打印IFrame中的内容实现的。
如：
<iframe style="visibility: visible" name="FrameId" width="100%" height="30%" src="NeedPrintedPage.asp"></iframe>
下面的pringFrame js函数将只打印Iframe中的内容，可以直接引用使用,如printFrame(FrameId); 
window.print = printFrame; 
// main stuff 
function printFrame(frame, onfinish) { 
if ( !frame ) frame = window; 
function execOnFinish() { 
switch ( typeof(onfinish) ) { 
case "string": execScript(onfinish); break; 
case "function": onfinish(); 
} 
if ( focused && !focused.disabled ) focused.focus(); 
} 
if (( frame.document.readyState !== "complete") &&( !frame.document.confirm("The document to print is not downloaded yet! Continue with printing?") )) 
{ 
execOnFinish(); 
return; 
} 
var eventScope = printGetEventScope(frame); 
var focused = document.activeElement; 
window.printHelper = function() { 
execScript("on error resume next: printWB.ExecWB 6, 1", "VBScript"); 
printFireEvent(frame, eventScope, "onafterprint"); 
printWB.outerHTML = ""; 
execOnFinish(); 
window.printHelper = null; 
} 
document.body.insertAdjacentHTML("beforeEnd", 
"<object id=\"printWB\" width=0 height=0 \ 
classid=\"clsid:8856F961-340A-11D0-A96B-00C04FD705A2\">"); 
printFireEvent(frame, eventScope, "onbeforeprint"); 
frame.focus(); 
window.printHelper = printHelper; 
setTimeout("window.printHelper()", 0); 
} 
// helpers 
function printIsNativeSupport() { 
var agent = window.navigator.userAgent; 
var i = agent.indexOf("MSIE ")+5; 
return parseInt(agent.substr(i)) >= 5 && agent.indexOf("5.0b1") < 0; 
} 
function printFireEvent(frame, obj, name) { 
var handler = obj[name]; 
switch ( typeof(handler) ) { 
case "string": frame.execScript(handler); break; 
case "function": handler(); 
} 
} 
function printGetEventScope(frame) { 
var frameset = frame.document.all.tags("FRAMESET"); 
if ( frameset.length ) return frameset[0]; 
return frame.document.body; 
} 
Iframe中所装载页面的打印效果在所装载页面设置就可以了，如分页等。 
5．后台打印 
通过建一个隐藏Iframe实现的，当然仍然会有页面装载的过程。 
下面的函数创建Iframe装载页面并打印。如 printHidden(url) //url为页面地址 
function printHidden(url) { 
document.body.insertAdjacentHTML("beforeEnd", 
"<iframe name=printHiddenFrame width=0 height=0></iframe>"); 
var doc = printHiddenFrame.document; 
doc.open(); 
doc.write("<body onload=\"parent.onprintHiddenFrame()\">"); 
doc.write("<iframe name=printMe width=0 height=0 src=\"" + 
url + "\"></iframe>"); 
doc.write("</body>"); 
doc.close(); 
} 
function onprintHiddenFrame() { 
function onfinish() { 
printHiddenFrame.outerHTML = ""; 
if ( window.onprintcomplete ) window.onprintcomplete(); 
} 
printFrame(printHiddenFrame.printMe, onfinish); 
} 
它用到了printFrame，所以别忘了引用前面的函数。 
以下为demo: 
<html> 
<head> 
<title>报表</title> 
<object id="WebBrowser" 
classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0" 
width="0"> 
</object> 
<style media="print" type="text/css"> 
.Noprint{display:none;} 
.PageNext{page-break-after: always;} 
</style> 
</head> 
<body> 
<div class="Noprint"> 
<input type="button" value="print" 
onclick="document.all.WebBrowser.ExecWB(6,6)"> 
<input type="button" value="printset" 
onclick="document.all.WebBrowser.ExecWB(8,1)"> 
<input type="button" value="view" 
onclick="document.all.WebBrowser.ExecWB(7,1)"> 
<input type="button" value="frame" 
onclick="printHidden(FrameId)"> 
</div> 
<div class="PageNext"> 
1 
</div> 
<div class="PageNext"> 
2 
</div> 
<iframe style="visibility: visible" diplay="none"name="FrameId" width="100%" 
height="30%" src="2.html"></iframe> 
</body> 
</html> 
<script type="text/javascript"> 
window.print = printFrame; 
// main stuff 
function printFrame(frame, onfinish) { 
if ( !frame ) frame = window; 
function execOnFinish() { 
switch ( typeof(onfinish) ) { 
case "string": execScript(onfinish); break; 
case "function": onfinish(); 
} 
if ( focused && !focused.disabled ) focused.focus(); 
} 
if (( frame.document.readyState !== "complete") &&( !frame.document.confirm("The document to print is not downloaded yet! Continue with printing?") )) 
{ 
execOnFinish(); 
return; 
} 
var eventScope = printGetEventScope(frame); 
var focused = document.activeElement; 
window.printHelper = function() { 
execScript("on error resume next: printWB.ExecWB 6, 1", "VBScript"); 
printFireEvent(frame, eventScope, "onafterprint"); 
printWB.outerHTML = ""; 
execOnFinish(); 
window.printHelper = null; 
} 
document.body.insertAdjacentHTML("beforeEnd", 
"<object id=\"printWB\" width=0 height=0 \ 
classid=\"clsid:8856F961-340A-11D0-A96B-00C04FD705A2\">"); 
printFireEvent(frame, eventScope, "onbeforeprint"); 
frame.focus(); 
window.printHelper = printHelper; 
setTimeout("window.printHelper()", 0); 
} 
// helpers 
function printIsNativeSupport() { 
var agent = window.navigator.userAgent; 
var i = agent.indexOf("MSIE ")+5; 
return parseInt(agent.substr(i)) >= 5 && agent.indexOf("5.0b1") < 0; 
} 
function printFireEvent(frame, obj, name) { 
var handler = obj[name]; 
switch ( typeof(handler) ) { 
case "string": frame.execScript(handler); break; 
case "function": handler(); 
} 
} 
function printGetEventScope(frame) { 
var frameset = frame.document.all.tags("FRAMESET"); 
if ( frameset.length ) return frameset[0]; 
return frame.document.body; 
} 
function printHidden(url) { 
document.body.insertAdjacentHTML("beforeEnd", 
"<iframe name=printHiddenFrame width=0 height=0></iframe>"); 
var doc = printHiddenFrame.document; 
doc.open(); 
doc.write("<body onload=\"parent.onprintHiddenFrame()\">"); 
doc.write("<iframe name=printMe width=0 height=0 src=\"" + 
url + "\"></iframe>"); 
doc.write("</body>"); 
doc.close(); 
} 
function onprintHiddenFrame() { 
function onfinish() { 
printHiddenFrame.outerHTML = ""; 
if ( window.onprintcomplete ) window.onprintcomplete(); 
} 
printFrame(printHiddenFrame.printMe, onfinish); 
} 
</script>

web 页面分页打印的实现

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js 学习笔记（三）
Dec 29 Javascript
基于jquery的放大镜效果
May 30 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
利用WebBrowser彻底解决Web打印问题（包括后台打印）
Jun 22 #Javascript
实现超用户体验 table排序javascript实现代码
Jun 22 #Javascript
js 单引号 传递方法
Jun 22 #Javascript
使弱类型的语言JavaScript变强势
Jun 22 #Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 #Javascript
PNG背景在不同浏览器下的应用
Jun 22 #Javascript
JavaScript 新手24条实用建议[TUTS+]
Jun 21 #Javascript
索尼(5) 东芝(1) 天线(6) 短波(1) TOSHIBA(1) 德劲(5) PL-880(1) ICF-7600(1) 电路图(1) SONY(15)
You might like
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
wordpress之wp-settings.php
2007/08/17 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
Javascript开发包大全整理
2006/12/22 Javascript
用JavaScript页面不刷新时全选择，全删除（GridView）
2009/04/14 Javascript
javascript offsetX与layerX区别
2010/03/12 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
python实现逻辑回归的示例
2020/10/09 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
经营理念口号
2014/06/21 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
119消防日活动总结
2014/08/29 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书