利用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 相关文章推荐
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
javascript的几种写法总结
Sep 30 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 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中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
PHP 验证登陆类分享
2015/03/13 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
基于jquery的无刷新分页技术
2011/06/11 Javascript
7个JS基础知识总结
2014/03/05 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
python tkinter窗口最大化的实现
2019/07/15 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
pymysql模块使用简介与示例
2020/11/17 Python
python 制作本地应用搜索工具
2021/02/27 Python
中软国际Java程序员机试题
2012/08/19 面试题
优秀应届毕业生推荐信
2014/02/18 职场文书
硕士生工作推荐信
2014/03/07 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
经典爱情感言
2015/08/03 职场文书