首页
所有分类
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 相关文章推荐
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 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
游标(1) GTID(1) 排序失效(1) ECharts(3) 重复数据(2) T-SQL(1) timestamp(1) ip连接(1) 表变量(1) 临时表(1)
You might like
咖啡语言
2021/03/03 咖啡文化
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
PHP print类函数使用总结
2010/06/25 PHP
php魔术变量用法实例详解
2014/11/13 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
php车辆违章查询数据示例
2016/10/14 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
javascript（基于jQuery）实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
日本必酷网络直营店：Biccamera
2019/03/23 全球购物
部队万能检讨书
2014/02/20 职场文书
行政人事岗位职责
2014/03/17 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
优秀教师个人材料
2014/12/15 职场文书
董事长助理岗位职责
2015/02/11 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python