首页
所有分类
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的with语句使用方法
Sep 21 Javascript
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
利用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
飞利浦(2) L4X25T(1) 德生PL330(2) ICF-SW7600GR(1) 山进(2) 德劲1103(3) D1875(1) D1835(1) 德生9700DX(1) PHILIPS(3)
You might like
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
JavaScript 继承详解（二）
2009/07/13 Javascript
js 编写规范
2010/03/03 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
Javascript中的方法链（Method Chaining）介绍
2015/03/15 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
简明 Python 基础学习教程
2007/02/08 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
python中wheel的用法整理
2020/06/15 Python
python3中布局背景颜色代码分析
2020/12/01 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
信息管理专业学生自荐信格式
2013/09/22 职场文书
入党申请书自我鉴定
2013/10/12 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
社区维稳工作方案
2014/06/06 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
建国大业电影观后感
2015/06/01 职场文书