利用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 相关文章推荐
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
javascript实现tab切换特效
Nov 12 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
JQuery学习总结【一】
Dec 01 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
JavaScript 空间坐标的使用
Aug 19 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
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
js实现放大镜特效
2017/05/18 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
js中DOM事件绑定分析
2018/03/18 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
python获取代理IP的实例分享
2018/05/07 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
解决Python使用列表副本的问题
2019/12/19 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
中专毕业生自我鉴定
2013/11/21 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
教师节活动主持词
2014/04/02 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书