利用WebBrowser彻底解决Web打印问题(包括后台打印)


Posted in Javascript onJune 22, 2009

抱着“取之于众 服务于众”的思想,我总结了一下,把它拿到网上来与大家分享,希望能帮助遇到类似问题的朋友。
我主要使用了IE内置的WebBrowser控件,无需用户下载和安装。WebBrowser有很多功能,除打印外的其他功能就不再赘述了,你所能用到的打印功能也几乎全部可以靠它完成,下面的问题就是如何使用它了。先说显示后打印,后面说后台打印。
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:<st1:chmetcnv tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="8856" unitname="F" w:st="on">8856F</st1:chmetcnv>961<st1:chmetcnv tcsc="0" numbertype="1" negative="True" hasspace="False" sourcevalue="340" unitname="a" w:st="on">-340A</st1:chmetcnv>-11D0-A96B<st1:chmetcnv tcsc="0" numbertype="1" negative="True" hasspace="False" sourcevalue="0" unitname="C" w:st="on">-00C</st1:chmetcnv>04FD<st1:chmetcnv tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="705" unitname="a" w:st="on">705A</st1:chmetcnv>2\">");

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,所以别忘了引用前面的函数。

总之,WebBroswer已经为我们提供了解决方案,我们只要结合需求把它应用好就行了

Javascript 相关文章推荐
非常好的js代码
Jun 27 Javascript
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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
ExtJS扩展 垂直tabLayout实现代码
Jun 21 #Javascript
You might like
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
php实现的双色球算法示例
2017/06/20 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
Python turtle库的画笔控制说明
2020/06/28 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
毕业生自荐信的主要内容
2013/10/29 职场文书
小学运动会报道稿
2014/10/04 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
2015年妇女工作总结
2015/05/14 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
Python制作动态字符画的源码
2021/08/04 Python