利用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中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
js中top的作用深入剖析
Mar 04 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
微信小程序button组件使用详解
Jan 31 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 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检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
查看django版本的方法分享
2018/05/14 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
详解Python学习之安装pandas
2019/04/16 Python
python opencv实现图像边缘检测
2019/04/29 Python
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
仓库主管的岗位职责
2013/12/04 职场文书
餐饮业会计岗位职责
2013/12/19 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
先进个人自荐书
2015/03/06 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书