首页
所有分类
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 相关文章推荐
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
vue如何截取字符串
May 06 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
JavaScript多种图形实现代码实例
Jun 28 Javascript
js实现简易计算器小功能
Nov 18 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 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
广告词(105) 请假条(31) 承诺书(369) 竞聘书(31) 建议书(203) 主持词(345) 活动总结(790) 责任书(145) 决心书(42) 聘任书(31)
You might like
PHP图片水印类的封装
2017/07/06 PHP
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
python静态方法实例
2015/01/14 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
New Balance澳大利亚官网：运动鞋和健身服装
2019/02/23 全球购物
什么是Rollback Segment
2013/04/22 面试题
自主招生自荐书
2013/11/29 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
中学生寄语大全
2014/04/03 职场文书
节水标语大全
2014/06/11 职场文书
个性与发展自我评价
2015/03/06 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python