用运之前简单介绍几个东西。
install_lodop32.exe与install_lodop64.exe这两个是2个网页打印控件,网页打印必须安装这个控件在客户端,分为32和64位安装控件。(如果自行找不到控件,请在博客下留言下qq,看到后会第一时间发给你控件)
1、LodopFuncs.js 这个js的作是,在用户点击此功能的时候,用来检查用户是否将install_lodop.exe安装。特别注意下面js中的红色部分,是控件在项目中的位置。
function getLodop(oOBJECT,oEMBED){ /************************** 本函数根据浏览器类型决定采用哪个对象作为控件实例: IE系列、IE内核系列的浏览器采用oOBJECT, 其它浏览器(Firefox系列、Chrome系列、Opera系列、Safari系列等)采用oEMBED, 对于64位浏览器指向64位的安装程序install_lodop64.exe。 **************************/ var strHtmInstall="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='./ocx/install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"; var strHtmUpdate="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='./ocx/install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>"; var strHtm64_Install="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='./ocx/install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"; var strHtm64_Update="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='./ocx/install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>"; var strHtmFireFox="<br><br><font color='#FF00FF'>注意:<br>1:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它。</font>"; var LODOP=oEMBED; try{ if (navigator.appVersion.indexOf("MSIE")>=0) LODOP=oOBJECT; if ((LODOP==null)||(typeof(LODOP.VERSION)=="undefined")) { if (navigator.userAgent.indexOf('Firefox')>=0) document.documentElement.innerHTML=strHtmFireFox+document.documentElement.innerHTML; if (navigator.userAgent.indexOf('Win64')>=0){ if (navigator.appVersion.indexOf("MSIE")>=0) document.write(strHtm64_Install); else document.documentElement.innerHTML=strHtm64_Install+document.documentElement.innerHTML; } else { if (navigator.appVersion.indexOf("MSIE")>=0) document.write(strHtmInstall); else document.documentElement.innerHTML=strHtmInstall+document.documentElement.innerHTML; } return LODOP; } else if (LODOP.VERSION<"6.1.5.7") { if (navigator.userAgent.indexOf('Win64')>=0){ if (navigator.appVersion.indexOf("MSIE")>=0) document.write(strHtm64_Update); else document.documentElement.innerHTML=strHtm64_Update+document.documentElement.innerHTML; } else { if (navigator.appVersion.indexOf("MSIE")>=0) document.write(strHtmUpdate); else document.documentElement.innerHTML=strHtmUpdate+document.documentElement.innerHTML; } return LODOP; } //=====如下空白位置适合调用统一功能:===== //======================================= return LODOP; }catch(err){ if (navigator.userAgent.indexOf('Win64')>=0) document.documentElement.innerHTML="Error:"+strHtm64_Install+document.documentElement.innerHTML;else document.documentElement.innerHTML="Error:"+strHtmInstall+document.documentElement.innerHTML; return LODOP; } }
2、页面调用js
<script language="javascript" type="text/javascript" src="Lodop/LodopFuncs.js"></script> //引入打印控件检索js <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0> <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0 pluginspage="install_lodop32.exe"></embed> </object>
3、引入已经绘制好的js打印文件,这个js需要自己去绘制,可以自行在网上查找网页工具绘制,也可以点此链接绘制http://www.hbsszx.com/lodop/PrintSample3.html找到里面的空白设计就可以自行绘制。(下面的js只是样例,和图中的不对应)
var LODOP; function f_print(){ LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM')); LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4"); //规定纸张大小;使用A4纸。 //SET_PRINT_STYLE:设置纯文本打印项风格,格式:SET_PRINT_STYLE(strStyleName,varStyleValue)。 //strStyleName:打印风格名,设定纯文本风格名称及其含义如下:|varStyleValue:打印风格值,相关值如下: //“FontName”: 字体名称。|值: 字符型,与操作系统字体名一致,缺省是“宋体”。 //“FontSize”: 字体大小。|值:数值型,单位是pt,缺省值是9,可以含小数,如13.5。 //“FontColor”: 字体颜色。|值:整数或字符型,如同CSS的color。 //“Bold”: 是否粗体。|值:数字型,1代表粗体,0代表非粗体,缺省值是0。 //“Italic”: 是否斜体。|值:数字型,1代表斜体,0代表非斜体,缺省值是0。 //“Underline”: 是否下滑线。|值:数字型,1代表有下划线,0代表无下划线,缺省值是0。 //“Alignment”: 内容左右靠齐方式。|值:数字型,1--左靠齐 2--居中 3--右靠齐,缺省值是1。 //“Angle”: 旋转角度。|值:数字型,逆时针旋转角度数,单位是度,0度表示不旋转 //注意:设定样式可以覆盖,更多设置参考技术使用文档。 LODOP.SET_PRINT_STYLE("FontColor", "#000000");//字体颜色 LODOP.SET_PRINT_STYLE("FontSize", 14); //字体大小 LODOP.ADD_PRINT_TEXT(50, 50, 100, 39, "我的博客"); //内容,参数(左边距,上边距,内容显示宽度,内容显示高度) LODOP.SET_PRINT_STYLE("FontColor", "#00ff00"); //更换颜色 LODOP.ADD_PRINT_TEXT(80, 50, 360, 39, "更换颜色"); LODOP.SET_PRINT_STYLE("FontSize", 24); //更换大小 LODOP.ADD_PRINT_TEXT(110, 50, 360, 39, "更换大小"); LODOP.ADD_PRINT_LINE(150, 50, 200, 50, 0, 1); //线,竖杠(上边距1,1左边距,上边距2,2左边距,intLineStyle, intLineWidth) //intLineStyle:线条类型,默认为0;0--实线 1--破折线 2--点线 3--点划线 4--双点划线 //intLineWidth:线条宽,默认是1,整数型,单位是(打印)像素,非实线的线条宽也是0。 LODOP.ADD_PRINT_LINE(150, 50, 150, 200, 0, 1); //线,横杠(上边距1,1左边距,上边距2,2左边距,intLineStyle, intLineWidth) LODOP.PREVIEW();//打印预览 //LODOP. PRINT (); //不经打印预览的直接打印。
4、看下效果图