当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 利用WebBrowser彻底解决Web打印问题（包括后台打印）

Javascript
jQuery开发者都需要知道的5个小技巧
Extjs学习笔记之六 面版
Javascript 中的类和闭包
IE6下JS动态设置图片src地址问题
Extjs学习笔记之七 布局
Extjs学习笔记之八 继承和事件基础
Extjs TriggerField在弹出窗口显示不出问题的解决方法
JavaScript中的集合及效率
利用js获取服务器时间的两个简单方法
在html页面上拖放移动标签
了解jQuery技巧来提高你的代码
JavaScript 页面坐标相关知识整理
Javascript UrlDecode函数代码
JQuery 遮罩层实现(mask)实现代码
jQuery 页面 Mask实现代码
Javascript的构造函数和constructor属性
js或css文件后面跟参数的原因说明
将CKfinder整合进CKEditor3.0的新方法
jQuery UI-Draggable 参数集合
jQuery 行级解析读取XML文件（附源码）

No. « 259 260 261 262 »

技术文章搜索

关键字

Javascript 中的 利用WebBrowser彻底解决Web打印问题（包括后台打印）

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 330 ::
收藏到网摘: n/a

BS架构下的打印大家是怎么解决的呢，我最近作了一个项目正好负责这一块，不仅要求打印页面的特定部分，还要求有后台的批量打印，在网上查了一些资料，最后终于解决了。

抱着“取之于众 服务于众”的思想，我总结了一下，把它拿到网上来与大家分享，希望能帮助遇到类似问题的朋友。
我主要使用了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已经为我们提供了解决方案，我们只要结合需求把它应用好就行了