如何定制表单的网页打印效果（项目示例）?
李小翔
2014-01-03 19:18

内容列表

供稿人：许庆洋
在 调用浏览器的功能打印表单时，如何获得更好的效果 一文中，讲述了实现网页打印的API与样式定制的基本方法。本文将讲述一个完整的BPM项目示例。
首先，给各个流程添加打印操作（通过BroModler建模工具，如果没有使用建模工具，则可以直接编辑流程定义的xml文件），流程定义的xml中定义如下：
<!-- 操作 -->
<actions>
    ....
   <action always=”true” cssClass=”print” index=”1” name=”打印” onclick=”printForm()” status=”show” target=”_self”/>
    ....
</actions>
其中 status 属性指的是表单的状态，表示表单在当前状态下显示该操作。不过需要注意的是，这里的 show 表示的是阅读状态，如打开待阅、已办等，edit 表示处理待办状态，包括编辑草稿、打开需要审核的只读的待办，和通常所认为的控制器操作不是一个意思。
添加操作后，如果没有对表单的样式做额外的修改，系统会默认使用产品中打印样式，分别定义在 body.less、form_xxx.less 等样式表的 “@media print” 中。默认样式主要是设置所有表格线与文字为黑色，其他样式和浏览器显示效果基本一致。
但是项目开发过程中可能调整了表单的布局及表单上部分样式，如果再用默认的打印样式去打印，则打印出来的效果可能就变了，例如我们把表单的线条颜色和单元格的背景色改为了#BBDAF9，即在应用的 form.css 中增加了以下样式：
/** 表单单元格的边框颜色和背景色 */
.prop .name, .prop .nameX, .prop th,
body.form .body th { 
   background-color: #EBF5FF;
   border: 1px solid #BBDAF9;
} 
.prop .value, .prop .valueX, .prop td,
.buttons, .prop .innerTable td { 
   border: 1px solid #BBDAF9;
} 
body.form .body h1, body.form .body .h1 { 
   border-color: #BBDAF9;
} 
.wfopinions td { 
   border-width: 0px;
} 
/* 意见签名 */
.wfopinions span.signature { 
   font-size: 16px;
   font-family: ”华文行楷”, ”华文楷体”, ”楷体”, ”黑体”, ”宋体”;
   font-weight: bold;
} 
/** 意见单元格 */
.wfopinions td { 
   padding: 2px 6px;
} 
.wfopinions table.wfopinionstable th, .wfopinions table.wfopinionstable td { 
   border: 1px solid #BBDAF9;
} 
不修改打印样式的话，打印效果将如下图所示，出现表格线条不清晰的问题：
于是，我们可以在 form.css 中添加如下的打印样式（设置边框颜色、背景颜色、字体、边距等），以输出更好的打印效果：
/** 打印时的样式 */
@media print { 
   .prop .name, .prop .nameX, .prop th,
   body.form .body th { 
       background-color: white;
       border-color: black;
    } 
   .prop .value, .prop .valueX, .prop td,
   .buttons, .prop .innerTable td { 
       border-color: black;
    } 
   body.form .body h1, body.form .body .h1 { 
       border-color: black;
       font-size:14px;
       padding: 5px 0;
    } 
   .wfopinions table.wfopinionstable th, .wfopinions table.wfopinionstable td { 
       border-color: black;
    } 
   /** 签名的表格（自定义的表单元素） */
   .signatureTable { 
       padding: 0px 0;
       border-collapse: collapse;
    } 
   .prop img.signatureImage { 
       padding: 0px 0;
       border-collapse: collapse;
       width: 50px;
       height: 20px
    } 
   .prop tr.signatureImageTr { 
       padding: 0px 0;
       border-collapse: collapse;
       height: 20px;
    } 
   /** main.less */
   * { 
       font-size: 13px;
       font-weight: bold;
    } 
   /** form24.less */
   body.form .prop .name, .prop .nameX { 
       padding-top: 4px;
       padding-bottom: 4px;
        _padding-top: 5px;    /** IE6 */
        _padding-bottom: 3px;
    } 
   body.form .prop .value, .prop .value2, .prop .value4,  .prop .valueX { 
       padding-top: 0px;
       padding-bottom: 0px;
       color: black;
       font-size: 12px;
       font-weight: bold;
    } 
} 
调整后的预览界面如下图所示，实际打印效果中的线条和字体非常清晰：
总之，根据不同的需求，在应用form.css的@media print { } 中增加或重写产品中默认的打印样式即可。