利用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 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
Jquery 设置标题的自动翻转
Oct 03 Javascript
html中table数据排序的js代码
Aug 09 Javascript
jquery.post用法示例代码
Jan 03 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
python多线程threading.Lock锁用法实例
2014/11/01 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
Flask-Mail用法实例分析
2018/07/21 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
Python正则表达式如何匹配中文
2020/05/27 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
小型婚礼主持词
2015/06/30 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers