一般动作
如何定制表单的网页打印效果（项目示例）?
供稿人：许庆洋
在 调用浏览器的功能打印表单时，如何获得更好的效果 一文中，讲述了实现网页打印的API与样式定制的基本方法。本文将讲述一个完整的BPM项目示例。
首先，给各个流程添加打印操作（通过BroModler建模工具，如果没有使用建模工具，则可以直接编辑流程定义的xml文件），流程定义的xml中定义如下：
<!-- 操作 -->
<actions>
....
<action always="true" cssClass="print" index="1" name="打印" onclick="printForm()" status="show" target="_self"/>
....
</actions>
<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;
}
.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;
}
}
@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 {}中增加或重写产品中默认的打印样式即可。