extjs中htmleditor与第三方打印插件Lodop结合使用.doc

extjs中，htmleditor与第三方打印插件Lodop结合使用 在之前，针对第三方打印插件Lodop在extjs中如何使用进行了简单测试，发现是可行的。在这次项目中，考虑实际使用需要，需要针对html格式内容进行编辑打印，笔者经过测试，发现使用起来也是相当简单和方便的。界面如下： 笔者在之前，考虑用户通过系统自动生产html报表，在通过panel的autoload方法获取html报表数据，但存在的问题是，该html报表无法进行更改，为此，改为将html数据放置在htmleditor中，这样用户就可以修改报表数据了，在需要打印时，将htmleditor控件中的html报表数据，插入至打印div中即可。1：定义打印div,并设置成隐藏模式 2：定义htmleditor,并获取html报表数据 . 定义控件 var Printreport_panel = new Ext.form.FormPanel( frame: false, border: false, height: 400, layout: fit, items: border: false, xtype: htmleditor, name: Conten, fontFamilies: 宋体, 黑体, 隶书, Arial, Courier New, Tahoma, Times New Roman, Verdana, defaultFont: 宋体 , autoScroll: true);.获取html报表数据items: xtype: button, height: 50, text: 获取数据, handler: function() Ext.Ajax.request( url: Appdns + Action/Print_Class_Get.asp?action=Print_OutCheckReport, params: P_Date: S_PrintView.getForm().findField(P_Date).getValue(), P_guestName: S_PrintView.getForm().findField(P_guestName).getValue(), P_OutNum: S_PrintView.getForm().findField(P_OutNum).getValue(), P_SNum: S_PrintView.getForm().findField(P_SNum).getValue(), InProId: InProId , success: function(response) Printreport_panel.getForm().findField(Conten).setValue(response.responseText) , failure: function(response) Ext.Msg.alert(S_Action, Server_Error_Text) ) .3: 将用户编辑完成数据，复制至打印的div中.handler: function() var _ss = Printreport_panel.getForm().findField(Conten).getValue(); Ext.get(PRN_OutReport).dom.innerHTML = _ss; if (CheckIsInstall() LODOP=getLodop(document.getElementById(LODOP_OB),document.getElementById(LODOP_EM); LODOP.PRINT_INIT(打印出货测试报告);LODOP.SET_PRINT_STYLE(FontSize,12);LODOP.SET_PRINT_STYLE(Bold,1);LODOP.ADD_PRINT_HTM(5mm,15mm,960,800,document.getElementById(PRN_OutReport).innerHTML); LODOP.SET_PRINT_PAGESIZE (2, 0, 0,A4);LODOP.SET_SHOW_MODE(LANDSCAPE_DEFROTATED,1); LODOP.SET_SHOW_MODE(HIDE_PAPER_BOARD,1); LODOP.SET_SHOW_MODE(SHOW_SCALEBAR,1);LODOP.SET_SHOW_MODE(PREVIEW_NO_MINIMIZE,1);LODOP.PREVIEW(); else Ext.MessageBox.alert(S_Action, 本机未安装过Lodop控件!不能进行打印，请联系管理员解决) .注意，这条语句document.getElementById(PRN_OutReport).innerHTML); 红色字体内容LODOP.SET_PRINT_PAGESIZE等语句意义，请参考打印插件Lodop的技术手册。-另外，笔者在测试数据时，发现，如果插入至div中的html数据带有样式时，在非IE内核的浏览器中，如搜狗高速，百度。chrome中，是可以正常显示，如果是IE内核（笔者使用IE9），发现报表数据没有样式，百度一下，需要进行样式调整，最简单的方法是在在style内容之前增加一个”nbsp;” 字符例如：笔者后台返回的html是这样设定的（ASP)：Case Print_OutCheckReportP_Date=request(P_Date)P_guestName=request(P_guestName)P_OutNum=request(P_OutNum)P_SNum=request(P_SNum)InProId = request(InProId)response.Write “nbsp;” /就在这里设定，否则后面的样式在IE下没效果,如下图所示再此之后增加样式例如:response.Write response.Write .table-c tableborder-right:1px solid #000;border-bottom:1px solid #000;word-break:break-all; word-wrap:break-all;font:宋体;font-size:12pxresponse.Write .table-c table tdheight:28px;border-left:1px solid #000;border-top:1px solid #000;font:宋体;font-size:12pxresponse.Write .style