版本:VS2005
使用水晶报表的人经常会感慨,这么强的报表工具,连个斜线也没有,太不可理解了。
就这么个小效果,折腾坏不少人。
而VS2005里的RDLC工具,是有斜线的,但是当放到WEB应用时,模板上画得好好的,运行起来后,斜线消失了?
简单分析一下HTML代码 (框架内的报表部分)
1
2
<
DIV
style
="overflow:auto;HEIGHT:100%;WIDTH:100%"
ID
="oReportDiv"
onscroll
="ShowFixedHeaders()"
3
onresize
="ShowFixedHeaders()"
>
4
<
TABLE
CELLSPACING
="0"
CELLPADDING
="0"
>
5
<
TR
>
6
<
TD
ID
="oReportCell"
onpropertychange
="ShowFixedHeaders()"
>
7
<
DIV
class
="a1"
>
8
<
TABLE
CELLSPACING
="0"
CELLPADDING
="0"
BORDER
="0"
COLS
="12"
LANG
="zh-CN"
9
class
="r10"
>
10
<
TR
>
11
<
TD
style
="HEIGHT:10.00mm;WIDTH:25.00mm"
>
12
</
TD
>
13
<
TD
style
="WIDTH:5.00mm"
>
14
</
TD
>
15
<
TD
style
="WIDTH:7.50mm"
>
16
</
TD
>
17
<
TD
style
="WIDTH:2.50mm"
>
18
</
TD
>
19
<
TD
style
="WIDTH:5.00mm"
>
20
</
TD
>
21
<
TD
style
="WIDTH:37.69mm"
>
22
</
TD
>
23
<
TD
style
="WIDTH:9.93mm"
>
24
</
TD
>
25
<
TD
style
="WIDTH:4.88mm"
>
26
</
TD
>
27
<
TD
style
="WIDTH:2.55mm"
>
28
</
TD
>
29
<
TD
style
="WIDTH:12.45mm"
>
30
</
TD
>
31
<
TD
style
="WIDTH:22.51mm"
>
32
</
TD
>
33
<
TD
style
="WIDTH:24.95mm"
>
34
</
TD
>
35
</
TR
>
36
<
TR
VALIGN
="top"
>
37
<
TD
COLSPAN
="5"
style
="HEIGHT:2.50mm"
>
38
</
TD
>
39
<
TD
ROWSPAN
="3"
COLSPAN
="2"
>
40
<
v:group
coordsize
="100,100"
coordorigin
="0,0"
style
="WIDTH:47.62mm;HEIGHT:19.84mm"
>
41
<
v:line
from
="0,0"
to
="100,100"
strokecolor
="#0"
strokeWeight
="1pt"
>
42
<
v:stroke
dashstyle
="solid"
/>
43
</
v:line
>
44
</
v:group
>
45
</
TD
>
46
<
TD
ROWSPAN
="3"
COLSPAN
="5"
>
47
</
TD
>
48
</
TR
>
49
<
TR
>
50
<
TD
COLSPAN
="5"
style
="HEIGHT:12.50mm"
>
51
</
TD
>
52
</
TR
>
53
<
TR
>
54
<
TD
COLSPAN
="5"
style
="HEIGHT:4.84mm"
>
55
</
TD
>
56
</
TR
>
57
<
TR
>
58
<
TD
COLSPAN
="12"
style
="HEIGHT:5.16mm"
>
59
</
TD
>
60
</
TR
>
61
<
TR
VALIGN
="top"
>
62
<
TD
COLSPAN
="2"
style
="HEIGHT:10.00mm"
>
63
</
TD
>
64
<
TD
COLSPAN
="8"
>
65
<
TABLE
CELLSPACING
="0"
CELLPADDING
="0"
LANG
="zh-CN"
>
66
<
TR
>
67
<
TD
style
="WIDTH:82.54mm;word-wrap:break-word;HEIGHT:10.00mm;"
class
="a8"
>
68
xxxx
69
</
TD
>
70
</
TR
>
71
</
TABLE
>
72
</
TD
>
73
<
TD
COLSPAN
="2"
>
74
</
TD
>
75
</
TR
>
76
<
TR
>
77
<
TD
COLSPAN
="12"
style
="HEIGHT:5.00mm"
>
78
</
TD
>
79
</
TR
>
80
<
TR
>
81
<
TD
style
="HEIGHT:12.54mm"
>
82
</
TD
>
83
<
TD
COLSPAN
="10"
style
="border-width:0px;border-top:1pt Solid Black"
>
84
</
TD
>
85
<
TD
>
86
</
TD
>
87
</
TR
>
88
<
TR
VALIGN
="top"
>
89
<
TD
COLSPAN
="4"
style
="HEIGHT:9.88mm"
>
90
</
TD
>
91
<
TD
ROWSPAN
="2"
COLSPAN
="5"
>
92
<
v:group
coordsize
="100,100"
coordorigin
="0,0"
style
="WIDTH:60.05mm;HEIGHT:17.46mm"
>
93
<
v:line
from
="0,100"
to
="100,0"
strokecolor
="#0"
strokeWeight
="1pt"
>
94
<
v:stroke
dashstyle
="solid"
/>
95
</
v:line
>
96
</
v:group
>
97
</
TD
>
98
<
TD
ROWSPAN
="2"
COLSPAN
="3"
>
99
</
TD
>
100
</
TR
>
101
<
TR
>
102
<
TD
COLSPAN
="4"
style
="HEIGHT:7.58mm"
>
103
</
TD
>
104
</
TR
>
105
<
TR
>
106
<
TD
COLSPAN
="12"
style
="HEIGHT:7.50mm"
>
107
</
TD
>
108
</
TR
>
109
<
TR
>
110
<
TD
COLSPAN
="12"
style
="HEIGHT:30.00mm"
>
111
</
TD
>
112
</
TR
>
113
</
TABLE
>
114
</
DIV
>
115
</
TD
>
116
<
TD
WIDTH
="100%"
HEIGHT
="0"
>
117
</
TD
>
118
</
TR
>
119
<
TR
>
120
<
TD
WIDTH
="0"
HEIGHT
="100%"
>
121
</
TD
>
122
</
TR
>
123
</
TABLE
>
124
</
DIV
>
125
我们看到线是用VML来绘制的
<
v:group
coordsize
="100,100"
coordorigin
="0,0"
style
="WIDTH:47.62mm;HEIGHT:19.84mm"
>
<
v:line
from
="0,0"
to
="100,100"
strokecolor
="#0"
strokeWeight
="1pt"
>
<
v:stroke
dashstyle
="solid"
/>
</
v:line
>
</
v:group
>
但是,页面上却少了让页面解析VML标签的声明
v\:* {behavior:url(#default#VML);}
于是解决思路就有了,主动在页面上附加上这个声明。
实际做起来就比较复杂,因为表面上RDLC页面是内嵌了一个iframe,实际上套了frame后又嵌了个iframe.
反正挺折腾人,解决方法如下:
1:新建一个x.css,放在同目录下
内容为:v\:* {behavior:url(#default#VML);}
2:在aspx的html模式下,加上如下代码即可。
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
>
try
{
var
oWindow
=
document.getElementById(
'
ReportFrameReportViewer1
'
).contentWindow ;
var
oHead
=
oWindow.document.getElementsByTagName(
'
frame
'
)[
1
].contentWindow.document.getElementsByTagName(
'
head
'
).item(
0
);
var
cssRef
=
oWindow.document.getElementsByTagName(
'
frame
'
)[
1
].contentWindow.document.createElement(
"
link
"
);
cssRef.setAttribute(
"
rel
"
,
"
stylesheet
"
) ;
cssRef.setAttribute(
"
type
"
,
"
text/css
"
);
cssRef.setAttribute(
"
href
"
,
"
x.css
"
);
oHead.appendChild(cssRef);
oWindow.document.getElementsByTagName(
'
frame
'
)[
1
].contentWindow.document.body.innerHTML
=
oWindow.document.getElementsByTagName(
'
frame
'
)[
1
].contentWindow.document.body.innerHTML;
}
catch
(err)
{
}
<
/
script>
加上这个后,发现了另外一个问题,就是如果线有交叉,那么就只显示一条。
比如我们的模板是这样的(图比较丑,只是做个示例)
显示出来的效果是这样的
模板有4条斜线,实际上只显示了两条。
而他的HTML 代码就是本文最开始的那段。
明显是少了两条,经过试验,如果两条线有交叉
(不一定是视觉上的交叉,
交叉应该是以一条线为对角线,所在的矩形,与另一矩形有任何的交叉,都将会只显示一个矩形)