润乾报表样式控制与CSS应用-CSDN博客

本文链接：https://blog.csdn.net/xiaohuihui_1992/article/details/53412829

本文介绍了如何使用CSS控制润乾报表的样式，包括通过添加到样式列表实现单元格样式复用，以及在报表发布页面引入CSS文件进行整体控制。虽然润乾V4设计器不支持批量修改和CSS文件引入，但可以通过定义CSS类并在报表模板中应用来实现样式的自定义和批量修改。此外，文章还展示了如何解决已设置单元格样式与全局CSS冲突的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

润乾报表单元格样式的设置，是针对每个单元格，样式作为单元格的属性加载在单元格中。报表提供的“添加到样式”功能将定义好的单元格样式添加到样式列表里，如果其他单元格的样式与定义过的单元格样式一样，那么就不用再重复设置，直接使用定义过的样式就可以了。设置了样式之后的单元格，该样式会作为单元格属性绑定在单元格中。
目前V4的设计器提供的样式设置功能不支持单元格样式的批量修改，也不支持CSS样式文件的设计器引入，但是报表发布页面中可以引入css文件对报表样式进行整体控制。

实现思路：
报表通过tag标签发布时，tag标签的name属性值（一般情况下设置name属性为report1）是报表在网页中的标识名，报表发布后会变成html的table，其id为report1，扩展后的单元格为table的td元素并且它们具有扩展后的id命名规则。因此可以定义控制html中table元素样式的css文件，并在报表展现的页面中引入css文件，这样就可以通过css控制报表单元格的样式。
下面的例子中实现了切换css样式文件达到报表换肤效果，通过单选按钮选择就可以完成css文件对报表样式的整体控制。

实现步骤：
1. css文件定义，分别定义两个css文件(a.css,b.css)，在其中进行样式定义。
可做如下定义：
body {
    font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #4f6b72;
    background: #E6EAE9;
}
caption {
    padding: 0 0 5px 0;
    width: 700px;
    font: 15px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-align: right;
}
a {
color: #A7C942;
text-decoration:none;
}
#report1 {
    width: 800px;
    padding: 1;
    margin: 1;
}
#report1 td {
   font: 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    border-right: 2px solid #C1DAD7;
    border-left: 2px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    border-top: 1px solid #C1DAD7;
    background: #F5FAFA;
    font-size:11px;
    padding: 6px 6px 6px 12px;
    color: #4f6b72;
}
2. 报表模板准备
3. 报表发布jsp页面
部分代码：
<head>
<title>css样式控制</title>

<link id="cssfile" rel="stylesheet" type="text/css" href="a.css">
</head>
……

<input type="radio" name="bt1" value="1" onclick="document.all.cssfile.href='a.css'">
  a.css
<input type="radio" name="bt2" value="2" onclick="document.all.cssfile.href='b.css'">
  b.css
……
<!—利用tag标签进行报表发布-->
<table align="center" width="100%" height="100%">
<caption>CSS样式切换</caption>

<tr><td>
  <report:html name="report1" reportFileName="<%=report%>"
   funcBarLocation="top"
   needPageMark="yes"
   generateParamForm="no"
   params="<%=param.toString()%>"
   needPivot="yes"
   exceptionPage="/reportJsp/myError2.jsp"
   appletJarName="runqianReport4Applet.jar,dmGraphApplet.jar"

  />
</td></tr>
</table>

存在问题：
以上方法会有产生一个问题，如果展现的报表模板在设计时如果设置了单元格样式，那么全局的css控制会导致在单元格中定义的样式失效。
解决办法：
1.报表模板的A4单元格设置样式，并通过“添加到样式”菜单把该样式保存到了样式列表中。

2.打开\designer\tmp\reportCellStyle.css，其中保存了样式列表中定义好的样式。将样式定义添加到全局css文件中。
如在a.css中添加如下样式定义
.style_1 {
font-family:Dialog !important;
font-size:12px !important;
visibility:visible !important;
font-weight:normal !important;
font-style:normal !important;
text-decoration:none !important;
text-indent:0.0px !important;
color:#000000 !important;
background-color:#FF6666 !important;
border-bottom-color:#808080 !important;
border-left-color:#808080 !important;
border-right-color:#808080 !important;
border-top-color:#808080 !important;
border-bottom-style:solid !important;
border-bottom-width:0.75px !important;
border-left-style:solid !important;
border-left-width:0.75px !important;
border-right-width:0.75px !important;
border-right-style:solid !important;
border-top-style:solid !important;
border-top-width:0.75px !important;
vertical-align:middle !important;
text-align:center !important;
}
4. 修改单独设置样式的单元格A2的数据类型设置为html，单元格表达式定义为="<div class='style_1'>"+ds1.Select(int(EMPID),false)+"</div>" ，通过html的方式应用了css样式。
实现效果

通过以上方法就可以单独控制部分单元格的样式，并也可以完成单元格样式的批量修改。如果在css文件中修改了style_1,所有应用了style_1样式的报表单元格的样式也会相应被修改。

润乾报表样式的CSS控制