基于WebBrowserJSCSS文书打印方案探究.docVIP

基于WebBrowserJSCSS文书打印方案探究 　　摘要：本文从客户的需求出发，在实现打印快捷、方便、打印页面所见即所得目标的前提下，提出了基于WebBrowser+JavaScript+css的文书打印方案。此方案专注于前端设计，不需要与服务器端直接交互，相对独立地实现了页面排版、预览、打印的功能。 　　关键词：WebBrowser；css；JavaScript；文书打印；所见即所得 　　中图分类号：TP399文献标识码：A文章编号：1007-9599 (2012) 02-0000-02 　　Instruments Print Program Exploration Based on WebBrowser+JS+CSS 　　Li Xiaoli1,Cui Dongjia2 　　(1.Henan University of Computer and Information Engineering,Henan University,Kaifeng475000,China;2.Business Administration College of Henan University,Kaifeng475000,China) 　　Abstract:This paper starting from the customers needs,under the premise of the printing speed, convenience,print the page WYSIWYG target,the WebBrowser+JavaScript+css instruments printing solutions. 　　This program focused on front-end design,does not require direct interaction with the server side,relatively independent of page layout,preview,print functionality. 　　Keywords:WebBrowser;Css;JavaScript;Instruments printing;WYSIWYG 　　一、引言 　　在基于B/S模式开发的MIS系统中，用户在Web模式下所进行的操作越来越多样化。由于用户操作水平参差不齐，所用浏览器版本多种多样，所以在提升用户体验度以及如何实现浏览器无关性方面就显得特别重要。其中文书因其特殊性，对打印也有特别的要求。首先，文书因其严格的格式限制，打印需要实现所见即所得，即Web页面上显示的内容和最终呈现在用户手中的打印文档效果需要一致。其次是打印的浏览器无关性，确保在任何浏览器下的打印效果与Web预览页面没有出入。另外还需实现不同分辨率打印机打印效果的兼容性，最后操作高效简捷也是不容忽视的。 　　本文针对以上的文书打印要求，提出了基于WebBrowser+JS+css的文书打印方案，实现了从文书Web页面设计到打印的功能。 　　二、文书的页面设计 　　不同的浏览器对HTML标签的支持情况不同，这导致同一页面在不同浏览器下的显示效果不一致。为了解决这一问题，在进行文书页面设计时采用各个浏览器通用的标签，同时利用css进行样式设置时对各个标签的初始值进行限定，避免浏览器之间因默认值不同造成显示差距。文书对长宽限制比较严格，设计界面时对div采用绝对值cm而非像素，这样即可以实现所见即所得，也可以解决不同分辨率打印机打印效果不兼容的问题。文书数量繁多，经分析大致分为中规中矩型、简洁型、复杂型三种类型，针对不同类型，采取不同的页面布局方案。 　　（一）中规中矩型文书的页面设计 　　此种类型的文书，行列界限清晰，对照整齐，利用table来进行整体布局，不仅使界面风格一致，而且简单快捷。布局时设置table的border为0px，表格内文字的对齐方式vevertical- align为bottom，再为需要填充内容的行或列添加下边框，并设置border-bottom的属性值为solid 1px #000000。 　　（二）简洁型文书的页面设计 　　这种类型的文书一般只有一到两段，需要填充的内容较少。对于页面中的文字和横线，可以直接使用u标签来显示带有下划线的文字，也可以使用p标签，并设置其text-decoration属性值为underline，还可以为需要填充的部分设置border-bottom和padding，并对其值进行限定。 　　（三）复杂型文书的页面设计 　　这是较为复杂的一种，页面中包含多行横线，且各行文字长短不一。如果利用标签设置横线，则无法实现前台页面与后台数据库连接时数据的插入